为什么 Ajax Jquery 表单点击不起作用 vs div 起作用？答案

【问题标题】：Why Ajax Jquery form click not working vs div that works?为什么 Ajax Jquery 表单点击不起作用 vs div 起作用？
【发布时间】：2011-03-13 15:02:28
【问题描述】：

Ajax Jquery form not working vs div 为什么会发生，我该如何解决我的错误？

view.html-带表单的代码

不工作

<html>
    <head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    </head>
    <body>
        <form id="parse-form" action="#" method="post">
            <button type="submit" id="submit-html">submit ajax request without parameters</button>
        </form>
        <div>array values: <div id="array-values"></div></div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#submit-html').click(function() {
                    $.ajax({
                        url: 'controller.php',
                        type: 'POST',
                        dataType:'json',
                        success: function(data) {
                            alert("response begin");
                            alert(data);
                            $.each(data, function (i, elem) {
                                $('#array-values').append('<div>'+elem+'</div>');
                            });
                        }
                    });
                });
            });
        </script>
    </body>
</html>

view.html -form 替换为 div

工作

<html>
    <head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    </head>
    <body>
        <div id="parse-form">
            <button type="submit" id="submit-html">submit ajax request without parameters</button>
        </div>
        <div>array values: <div id="array-values"></div></div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#submit-html').click(function() {
                    $.ajax({
                        url: 'controller.php',
                        type: 'POST',
                        dataType:'json',
                        success: function(data) {
                            alert("response begin");
                            alert(data);
                            $.each(data, function (i, elem) {
                                $('#array-values').append('<div>'+elem+'</div>');
                            });
                        }
                    });
                });
            });
        </script>
    </body>
</html>

controller.php - 返回 json 数组的简单 php 文件：

<?php
$arr=array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr);
?>

谢谢

【问题讨论】：

我很好奇你为什么在没有数据的情况下发帖，GET/$.getJSON() 会因任何原因成为问题吗？这将是一种更简单的方法...或者您是否打算.serialize() 除了示例之外的其他数据？
我简化了代码，在实际代码中我应该发送输入文本字段

标签： ajax json html forms

【解决方案1】：

该表单有一个带有 type="submit" 按钮的默认操作，该按钮正在提交，因此您需要通过添加 return false 或 event.preventDefault() 来阻止这种情况发生，如下所示：

$(document).ready(function() {
    $('#submit-html').click(function(e) {
        $.ajax({
            url: 'controller.php',
            type: 'POST',
            dataType:'json',
            success: function(data) {
                alert("response begin");
                alert(data);
                $.each(data, function (i, elem) {
                    $('#array-values').append('<div>'+elem+'</div>');
                });
            }
        });
        return false;
        //or e.preventDefault();
    });
});

没有这个，表单就像没有 JavaScript 一样正常提交，离开页面。如此有效地进行刷新，而不是 AJAX 提交您的表单（没有时间完成......因为您离开了 :)

【讨论】：

【解决方案2】：

我的猜测是 form 在 ajax 有机会响应之前提交并刷新页面。

尝试将return false; 放在click 处理程序的末尾。

$('#submit-html').click(function() {
  $.ajax({
    url: 'controller.php',
    type: 'POST',
    dataType: 'json',
    success: function(data) {
      alert("response begin");
      alert(data);
      $.each(data, function(i, elem) {
        $('#array-values').append('<div>' + elem + '</div>');
      });
    }
  });
  return false;
});

当然，如果用户在其中一个字段中点击Enter，您也会遇到同样的问题。除非您阻止 Enter 键提交表单，否则您可能希望使用 submit() 处理程序来处理事件。

$('#parse-form').submit(function() {
  $.ajax({
    url: 'controller.php',
    type: 'POST',
    dataType: 'json',
    success: function(data) {
      alert("response begin");
      alert(data);
      $.each(data, function(i, elem) {
        $('#array-values').append('<div>' + elem + '</div>');
      });
    }
  });
  return false;
});

【讨论】：

【解决方案3】：

<form> 内的type=submit 元素将在单击时执行表单请求。

您需要通过在点击回调中运行event.preventDefault() 来中止默认行为。

【讨论】：

【解决方案4】：

尝试使用 submit() http://api.jquery.com/submit/ ，这应该适用于键盘事件以及点击。您可以使用 serialize() 将任何表单数据获取到 ajax 对象数据变量中。

【讨论】：

它不适用于提交，序列化（）什么？ - 我不发送任何表单数据。