AJAX 削除イベントとデータのロード-jsチュートリアル-php.cn

AJAX 削除イベントとデータのロード

Mar 26, 2017 pm 05:15 PM

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;script src=&quot;../jquery/jquery-1.11.2.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;h1&gt;显示数据&lt;/h1&gt;

&lt;table width=&quot;100%&quot; border=&quot;1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
  &lt;tr&gt;
      &lt;td&gt;代号&lt;/td&gt;
       &lt;td&gt;名称&lt;/td&gt;
       &lt;td&gt;操作&lt;/td&gt;
   &lt;/tr&gt;

   &lt;tbody id=&quot;tb&quot;&gt;

   &lt;/tbody&gt;

&lt;/table&gt;


&lt;/body&gt;
&lt;script type=&quot;text/javascript&quot;&gt;

ログイン後にコピー

データのロード
Load();

データをロードするメソッド

function Load()
{
$.ajax({
     url:&quot;jiazai.php&quot;,
     dataType:&quot;TEXT&quot;,
     success: function(data){
           var str = &quot;&quot;;
           var hang = data.split(&quot;|&quot;);
           for(var i=0;i&lt;hang.length;i++)
           {
              var lie = hang[i].split(&quot;^&quot;);
              str = str+&quot;&lt;tr&gt;&lt;td&gt;&quot;+lie[0]+&quot;&lt;/td&gt;&lt;td&gt;&quot;+lie[1]+&quot;&lt;/td&gt;&lt;td&gt;&lt;input type=&#39;button&#39; code=&#39;&quot;+lie[0]+&quot;&#39; value=&#39;删除&#39; class=&#39;sc&#39; /&gt;&lt;/td&gt;&lt;/tr&gt;&quot;;
           }
           $(&quot;#tb&quot;).html(str);

ログイン後にコピー

削除イベント

   $(&quot;.sc&quot;).click(function(){
              var code = $(this).attr(&quot;code&quot;);
              $.ajax({
                 url:&quot;shanchu.php&quot;,
                 data:{code:code},
                 dataType:&quot;TEXT&quot;,
                 type:&quot;POST&quot;,
                 success: function(d){
                    if(d.trim()==&quot;OK&quot;)
                    {
                       alert(&quot;删除成功&quot;);
                       Load();
                    }
                    else
                    {
                       alert(&quot;删除失败&quot;);
                    }
                 }
                 });
              })
        }
  });

}

&lt;/script&gt;

ログイン後にコピー

以上がAJAX 削除イベントとデータのロードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。