使用Ajax的每个按钮的不同动作 [英] Different actions for each button using Ajax

查看：62
本文介绍了使用Ajax的每个按钮的不同动作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

嗯，我的问题是我试图插入，更新和删除通过使用Ajax的表单发送数据，但我正在努力提交按钮，因为我需要每个人执行一个特定的操作，每次我点击它们调用PHP的指令，但你可以在Ajax中看到的动作只执行提交，而不是取决于我点击的按钮，我真的需要解决这个问题...



FORM 

 < form method =postid =form_shirt ENCTYPE = 多部分/格式数据 > 
 ID：< br> 
< input type =hiddenname =id_shirtid =id_shirtclass =form-control> 
名称：< br> 
< input type =textname =name_shirtid =name_shirtclass =form-controlrequired =required> 
价格：< br> 
< input type =textname =price_shirtid =price_shirtclass =form-controlrequired =required> 
 
< input type =submitname =btninsertid =btninsertvalue =Insertclass =btn btn-success/> 
< input type =submitname =btnupdateid =btnupdatevalue =Updateclass =btn btn-warning> 
< input type =submitname =btndeleteid =btndeletevalue =Deleteclass =btn btn-danger> 
< / form>

AJAX

< $（$＃$ $ $ $''$ $ $ $ $' event.preventDefault（）;
$ .ajax（{
url：insert_shirts.php，
method：POST，
data：new FormData（this），
contentType：false，
cache：false，
processData：false，
success：function（data）{
$（'＃form_shirt'）[0] .reset （）;
$（'＃table_shirt'）。html（data）;
}
}）;
}）;

$ b $ （submit，function（event）{
event.preventDefault（）;
$ .ajax（{
url：update_shirts.php ，
method：POST，
data：new FormData（this），
contentType：false，
cache：false，
processData：false，
成功：函数（数据）{
$（'＃form_shirt'）[0] .reset（）;
$（'＃tab le_shirt）的html（数据）。
}
}）;
}）; $ {

$ b $（'＃form_shirts'）。on（submit，function（event）{
event.preventDefault（）;
$ .ajax（{
url：delete_shirts.php，
方法：POST，
data：new FormData（this），
contentType：false，
cache：false，
processData：false，
success：function（data）{
$（'＃form_shirt'）[0] .reset（）;
$（'＃table_shirt'）。 html（data）;
}
}）;
}）;

}）;

PHP 

 <？php 
 
 $ connect = mysqli_connect（localhost，root，，shirts）; 
 
 $ output =''; 
 $ name_shirt = mysqli_real_escape_string（$ connect，$ _POST [name_shirt]）; 
 $ price_shirt = mysqli_real_escape_string（$ connect，$ _POST [price_shirt]）; 
 
 $ query =插入衬衫（名称，价格）
 VALUES（'$ name_shirt'，'$ price_shirt'）; 
 if（mysqli_query（$ connect，$ query））
 {
 $ output。='< label class =text-success>插入数据< / label>'; 
 $ select_query =SELECT id_shirt，name，price FROM shirts; 
 $ result = mysqli_query（$ connect，$ select_query）; 
 $ output。='
< table id =shirtsclass =table table-bordered> 
< thead> 
< tr> 
< th> ID< / th> 
< th> NAME< / th> 
 PRICE< / th> 
< / tr> 
< / thead> 
'; 
 while（$ row = mysqli_fetch_array（$ result））
 {
 $ output。='
< tr> 
< tbody> 
< td>'。 $ row [id_shirt]。 < / TD> 
< td>'。 $ row [name]。 < / TD> 
< td>'。 $ row [price]。 < / TD> 
< / tr> 
< / tbody> 
'; 
} 
 $ output。='< / table>'; 
} 
 echo $ output; 
 
？>


解决方案

。除了可以在单击按钮时引用的同义类之外，只需创建三个具有唯一类名称的按钮。然后引用该同义类的单击处理程序（而不是表单提交）： p> 

 < form method =postid =form_shirtenctype =multipart / form-data> 
 ID：
< br> 
< input type =hiddenname =id_shirtid =id_shirtclass =form-control>名称：
< br> 
< input type =textname =name_shirtid =name_shirtclass =form-controlrequired =required>价格：
< br> 
< input type =textname =price_shirtid =price_shirtclass =form-controlrequired =required> 
 
< button name =btninsertid =btninsertvalue =Insertclass =submit insert_shirts btn btn-success/> 
< button name =btnupdateid =btnupdatevalue =Updateclass =submit update_shirts btn btn-warning/> 
< button name =btndeleteid =btndeletevalue =Deleteclass =submit delete_shirts btn btn-danger/> 
< / form>

JavaScript ：

函数（）{
$（document）.ready（function（）{
$（'。submit'）。 .ajax（{
url：this.classList [1] +.php，
method：POST，
data：new FormData（this），
contentType： false，
cache：false，
processData：false，
success：function（data）{
$（'＃form_playera'）[0] .reset（）;
$（'＃table_playeras'）。html（data）;
}
}）;
}）;
}）;

请注意，您可以在一个 $（document） .ready（），这三个函数都可以合并为一个，通过使用 url 参数发送给AJAX =https://developer.mozilla.org/en/docs/Web/API/Element/classList =nofollow noreferrer> this.classList ： url ：this.classList [1] +.php。 1 表示每个元素的第二个类（ insert_shirts ， update_shirts 和 delete_shirts ）。



另外请注意，您不需要事件.preventDefault（），因为你不再针对表单提交。



希望这有助于！ ：）

Well, my problem is that I am trying to insert, update and delete sending the data through a form using Ajax but I'm struggling with the submit buttons because I need each one to perform one specific action everytime I click them calling the url where are the php instructions, but as you can see in the Ajax the action only performs on submit and not depending on the button I click, I really need to solve this...

FORM

    <form method="post" id="form_shirt" enctype="multipart/form-data">
       ID:<br>
       <input type="hidden" name="id_shirt" id="id_shirt" class="form-control" >
       Name:<br>
       <input type="text" name="name_shirt" id="name_shirt" class="form-control" required="required">
       Price:<br>
       <input type="text" name="price_shirt" id="price_shirt" class="form-control" required="required">

        <input type="submit" name="btninsert" id="btninsert" value="Insert" class="btn btn-success"/>
        <input type="submit" name="btnupdate" id="btnupdate" value="Update" class="btn btn-warning">
        <input type="submit" name="btndelete" id="btndelete" value="Delete" class="btn btn-danger">
   </form>

AJAX

$(document).ready(function(event){
 $('#form_shirts').on("submit", function(event){
  event.preventDefault();  
   $.ajax({  
    url:"insert_shirts.php",  
    method:"POST",  
    data:new FormData(this), 
    contentType: false,       
    cache: false,             
    processData:false,
    success:function(data){  
     $('#form_shirt')[0].reset();
     $('#table_shirt').html(data);
    }  
   });  
 });


 $('#form_shirts').on("submit", function(event){
  event.preventDefault();  
   $.ajax({  
    url:"update_shirts.php",  
    method:"POST",  
    data:new FormData(this), 
    contentType: false,       
    cache: false,             
    processData:false,
    success:function(data){  
     $('#form_shirt')[0].reset();
     $('#table_shirt').html(data);
    }  
   });  
 });


     $('#form_shirts').on("submit", function(event){
      event.preventDefault();  
       $.ajax({  
        url:"delete_shirts.php",  
        method:"POST",  
        data:new FormData(this), 
        contentType: false,       
        cache: false,             
        processData:false,
        success:function(data){  
         $('#form_shirt')[0].reset();
         $('#table_shirt').html(data);
        }  
       });  
     });

});

PHP

<?php

$connect = mysqli_connect("localhost", "root", "", "shirts");

 $output = '';
    $name_shirt = mysqli_real_escape_string($connect, $_POST["name_shirt"]);  
    $price_shirt = mysqli_real_escape_string($connect, $_POST["price_shirt"]);  

    $query = "INSERT into shirts ( name, price)
    VALUES ('$name_shirt','$price_shirt') ";
    if(mysqli_query($connect, $query))
    {
     $output .= '<label class="text-success">Data Inserted</label>';
     $select_query = "SELECT id_shirt, name, price FROM shirts";
     $result = mysqli_query($connect, $select_query);
     $output .= '
      <table id="shirts" class="table table-bordered">  
                   <thead>
                    <tr>  
                        <th>ID</th>
                        <th>NAME</th>
                        <th>PRICE</th>
                    </tr>
</thead>
     ';
     while($row = mysqli_fetch_array($result))
     {
      $output .= '
       <tr>  
       <tbody>
                         <td>' . $row["id_shirt"] . '</td>
                         <td>' . $row["name"] . '</td>
                         <td>' . $row["price"] . '</td>
                    </tr>
                    </tbody>
      ';
     }
     $output .= '</table>';
    }
    echo $output;

?>

解决方案

You can't have three buttons for a single form. Simply create three buttons that will have unique class names, in addition to a synonymous class that you can reference on button click. Then reference the click handler for that synonymous class (rather than the form submission):

HTML:

<form method="post" id="form_shirt" enctype="multipart/form-data">
  ID:
  <br>
  <input type="hidden" name="id_shirt" id="id_shirt" class="form-control"> Name:
  <br>
  <input type="text" name="name_shirt" id="name_shirt" class="form-control" required="required"> Price:
  <br>
  <input type="text" name="price_shirt" id="price_shirt" class="form-control" required="required">

  <button name="btninsert" id="btninsert" value="Insert" class="submit insert_shirts btn btn-success" />
  <button name="btnupdate" id="btnupdate" value="Update" class="submit update_shirts btn btn-warning" />
  <button name="btndelete" id="btndelete" value="Delete" class="submit delete_shirts btn btn-danger" />
</form>

JavaScript:

$(document).ready(function() {
  $('.submit').on("click", function() {
    $.ajax({
      url: this.classList[1] + ".php",
      method: "POST",
      data: new FormData(this),
      contentType: false,
      cache: false,
      processData: false,
      success: function(data) {
        $('#form_playera')[0].reset();
        $('#table_playeras').html(data);
      }
    });
  });
});

Note that you can have the three separate functions in one $(document).ready(), and the three functions can all be combined into one, sending different url parameters to AJAX by using this.classList: url: this.classList[1] + ".php". The 1 denotes the second class of each element (insert_shirts, update_shirts and delete_shirts respectively).

Also note that you won't need event.preventDefault(), as you're no longer targeting the form submission.

Hope this helps! :)

这篇关于使用Ajax的每个按钮的不同动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆