Question

编辑 - 信息似乎在发布，但在form_data.php上似乎没有检索发布的值

这是AJAX

<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>

    $("#submit_boxes").submit(function() { return false; });
    $('input[type=submit]').click(function() {
        $.ajax({
              type: 'POST',
              url: 'form_data.php',
              data: $(this).serialize(),
              success: function(data) {
                $('#view_inputs').html(data); //view_inputs contains a PHP generated table with data that is processed from the post. Is this doable or does it have to be javascript?
       });
       return false;
        });
   };
  </script>
</head>

以下是我要提交的表单

 <form action="#" id = "submit_boxes">
        <input type= "submit" name="submit_value"/>
        <input type="textbox" name="new_input">
 </form>

这是获取发布到

的信息的form_data页面

<?php
    if($_POST['new_input']){
      echo "submitted";
      $value = $_POST['new_input'];
      $add_to_box = new dynamic_box();
      array_push($add_to_box->box_values,$value);
      print_r($add_to_box->box_values);
   }
?>

Answer 1

您的表单正在提交，因为您有错误会阻止阻止表单停止运行的代码。具体为dataType: dataType和this.html(data)。首先dataType为undefined，如果您不知道要将数据类型设置为什么，请将其保留。其次this指的是没有html方法的表单元素，你可能意味着$(this).html(data)虽然这不太可能你想要的，很可能是你想要的$(this).serialize()。所以你的代码看起来应该是

$('form#submit_boxes').submit(function() {
    $.ajax({
        type: 'POST',
        url: 'form_data.php',
        data: $(this).serialize(),
        success: success
    })
    return false;
});

此外，如果你必须在表单提交处理程序中调试ajax，你要做的第一件事是阻止表单提交（返回false只能在结尾处完成），这样你就可以看到发生了什么错误。

$('form#submit_boxes').submit(function(event) {
    event.preventDefault();
    ...
});

Answer 2

您可以使用jQuery的.serialize()方法发送表单数据

下面有一些很好的链接供您理解

jquery form.serialize and other parameters

http://www.tutorialspoint.com/jquery/ajax-serialize.htm

http://api.jquery.com/serialize/

Answer 3

处理它的一种方法......

取消通常的表格提交：

$("#submit_boxes").submit(function() { return false; });

然后为您的按钮分配一个点击处理程序：

$('input[type=submit]').click(function() {
            $.ajax({
                  type: 'POST',
                  url: 'form_data.php',
                  data: this.html(data),
                  success: success,
                  dataType: dataType
           })
           return false;
});

麻烦用AJAX发布表单

3 个答案: