ajax 单击按钮和表单值

Question

我有一个表单，每个项目都有一个添加按钮。我只想将表单数据提交到处理ajax 的php 脚本，并且还知道正在单击哪个添加按钮。我没有在 ajax 页面的帖子中看到按钮的单击 ID，因此我尝试使用 event.target 将其附加到序列化数据。我在第一个警报中看到了点击的 ID。邮件从流程页面发送，但是post数据中没有id，并且没有弹出ajax响应成功警报。

有什么想法我做错了吗，或者有更好的方法吗？

<form name="callback_form" id="callback_form" method="post">
    <input name="num1" type="text" value="num1val">
    <select name="sel1" id="sel1">
    <option value="sel1val1">sel1val</option>
    <option value="sel1val2">sel1val2</option>
    </select>
    <button type="button" name="add1" id="add1" onclick="addToCart(event)">add Item 1</button> 

    <input name="num2" type="text" value="num2val">
    <select name="sel2" id="sel2">
    <option value="sel2val1">sel2val1</option>
    <option value="sel2val2">sel2val2</option>
    </select>
    <button type="button" name="add2" id="add2" onclick="addToCart(event)">add item 2</button> 
</form>

<script>
function addToCart(event){
      event.preventDefault();
      event.stopPropagation();
      var id = event.target.id;  
      var dataString = $(this).serialize()+'&id='+id;
      alert(dataString);

      $.ajax({
        type: "POST",
        url: "process_ajax.php",
        data: $('#callback_form').serialize(),
        dataType: 'json',
        cache: false,       
        success: function(response)
        {
        var jsonData = JSON.parse(response);

        if (jsonData.success == "1")
            alert(1);
        }    
    }); 
}
</script>

process_ajax.php

$post=print_r($_POST,1);
mail('[email protected]','-'.post.'-'.time().'-',$post);
echo json_encode(array('success' => 1,'return_message' => 'yep'));

Answer 1

您正在序列化表单数据，但不包括 id 参数，请尝试使用：

function addToCart(event){
  event.preventDefault();
  event.stopPropagation();
  var id = event.target.id;  
  var formData = $('#callback_form').serialize();
  var dataString = formData + '&id=' + id;
  alert(dataString);

  $.ajax({
    type: "POST",
    url: "process_ajax.php",
    data: dataString,
    dataType: 'json',
    cache: false,       
    success: function(response) {
      if (response.success == "1") {
        alert(1);
      }
    }    
  });
}