使用AJAX进行问题发布

Question

edit - the info appears to be posting, but on form_data.php it doesn't seem to be retrieving the posted values 编辑-信息似乎正在发布，但是在form_data.php上似乎并没有检索到发布的值

Here's the AJAX 这是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>

Here is the form I'm trying to submit 这是我要提交的表格

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

Here is the form_data page that gets the info posted to 这是将信息发布到的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

Your form is submitting because you have errors which prevents the code that stops the form from submiting from running. 您提交表单是因为您遇到错误，导致阻止提交表单的代码无法运行。 Specifically dataType: dataType and this.html(data) . 具体来说是dataType: dataType和this.html(data) 。 Firstly dataType is undefined , if you don't know what to set the data type to then leave it out. 首先， dataType是undefined ，如果您不知道如何设置数据类型，则将其忽略。 Secondly this refers to the form element which has no html method, you probably meant $(this).html(data) although this is unlikely what you wanted, most likely its $(this).serialize() you want. 其次， this是指没有html方法的form元素，您可能的意思是$(this).html(data)尽管这不太可能是您想要的，很可能是您想要的$(this).serialize() 。 So your code should look like 所以你的代码应该看起来像

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

Additionally if you have to debug ajax in a form submit handler the first thing you do is prevent the form from submitting(returning false can only be done at the end) so you can see what errors occurred. 另外，如果您必须在表单提交处理程序中调试ajax，那么您要做的第一件事就是阻止表单提交（返回false只能在最后完成），这样您就可以看到发生了什么错误。

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

Answer 2

You can use jQuery's .serialize() method to send form data 您可以使用jQuery的.serialize()方法发送表单数据

Some nice links below for you to understand that 以下一些不错的链接供您了解

jquery form.serialize and other parameters jQuery form.serialize和其他参数

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

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

Answer 3

One way to handle it... 一种处理方式...

Cancel the usual form submit: 取消通常的表单提交：

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

Then assign a click handler to your button: 然后为您的按钮分配一个点击处理程序：

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

使用AJAX进行问题发布

问题描述

3 个解决方案

解决方案1
1 2013-03-25 18:59:04

解决方案2
0 2013-03-25 18:31:24

解决方案3
0 2013-03-25 18:42:11

使用AJAX进行问题发布

问题描述

3 个解决方案

解决方案1 1 2013-03-25 18:59:04

解决方案2 0 2013-03-25 18:31:24

解决方案3 0 2013-03-25 18:42:11

解决方案1
1 2013-03-25 18:59:04

解决方案2
0 2013-03-25 18:31:24

解决方案3
0 2013-03-25 18:42:11