Php 使用AJAX发布表单时遇到问题_Php_Javascript_Jquery_Ajax

Php 使用AJAX发布表单时遇到问题

php javascript jquery ajax

Php 使用AJAX发布表单时遇到问题,php,javascript,jquery,ajax,Php,Javascript,Jquery,Ajax,编辑-信息似乎正在发布，但在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]').

编辑-信息似乎正在发布，但在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>


$（“#提交框”）.submit（函数（）{return false；}）；
$（'input[type=submit]'）。单击（函数（）{
$.ajax({
键入：“POST”，
url:“form_data.php”，
数据：$（this）.serialize（），
成功：功能（数据）{
$（'#view_inputs'）.html（data）；//view_inputs包含一个PHP生成的表，其中包含从post处理的数据。这是可行的还是必须是javascript？
});
返回false；
});
};

这是我要提交的表格

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

这是表单数据页，可以将信息发布到

<?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);
   }
?>

您可以使用jQuery的

.serialize（）

方法发送表单数据

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

一种处理方法

取消通常的表单提交：

$("#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;
});

您的表单正在提交，因为您的错误阻止了停止表单提交的代码运行。特别是

dataType:dataType

和

this.html（data）

。首先，

数据类型

是

未定义的

，如果您不知道要将数据类型设置为什么，则将其忽略。其次，

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();
    ...
});

页面上是否有任何错误？基本调试，

dataType

undefined@Musa这对你来说可能是基本的，但我不太清楚这意味着什么。我如何定义它？为了更容易调试，请删除

returnfalse

，将

作为参数添加到submit事件处理程序中，并在ajax请求之前使用

e.preventDefault（）

。现在，您应该在控制台中看到一个错误，而不是页面刷新。@KevinB我在控制台或网络选项卡中没有看到任何错误显示。您确定OP不想要html:P.OP=原始海报的格式，那就好了。serialize将帮助您将表单数据序列化并将所有数据发送到服务器端我完全按照您所说的做了，但仍然没有看到任何错误。我使用的是chrome，网络或控制台上没有显示任何内容。我甚至包括了event.preventDefault（）。@user1104854确保函数具有

event

作为参数。好的，因此当我运行时，我会得到以下错误“未捕获引用错误：未定义成功”。当我删除成功语句时，它会消失，但我没有看到任何其他错误。它显示数据已正确发布，然而，在该页面上，我使用javascript在收到帖子时发出警报，但事实并非如此triggering@user1104854

success

被认为是一个函数，当ajax请求成功完成时调用它（success只是一个名称，它可以是任何东西）。我建议您阅读一下api.jquery.com/jquery.ajax/@user1104854

，在该页面上，我使用javascript在收到帖子时发出警报，但这不会触发

，所以您可以在浏览器中打开

form_data.php

，等待警报？