通过 jquery ajax() 和 serialize() 提交 html 表单答案

【问题标题】：submitting html form via jquery ajax() and serialize()通过 jquery ajax() 和 serialize() 提交 html 表单
【发布时间】：2014-04-09 11:49:42
【问题描述】：

我想通过 jquery ajax 提交此表单，这是我所做的，但它不起作用。即表单正在提交页面刷新，我没有看到响应，即在同一页面上打印数组。

HTML

  <link rel='stylesheet' type='text/css' href='css/pepper-grinder/jquery-ui-1.10.4.custom.css' />
    <script  type='text/javascript' src='js/jquery-1.10.2.js' ></script>
    <script  type='text/javascript' src='js/jquery-ui-1.10.4.custom.min.js' ></script>
        <form  id="form1" method="get" action="submit.php   ">
            <label>Name of Organization</label>
            <input type="text" name="OrgName" id="OrgName" class="textfield">
            <label>Address of Organization</label>
            <input type="text" name="OrgAddress" id="OrgAddress" class="textfield">
            <input type="submit" value="Register Organization">
        </form>
        <div id="response">ads</div>

    <script>
    $document.ready(function(){
        $("#form1").click((function(event){
            event.preventDefault();

            $.ajax({
                    url:'submit.php',
                    type:'GET',
                    data:$(this).serialize(),
                    success:function(result){
                        $("#response").text(result);

                    }

            });
        });
    });
    </script>

PHP (submit.php)

<?php
print_r($_GET);
?>

【问题讨论】：

尝试使用 .serializeArray() ，api.jquery.com/serializeArray
请注意：如果您想通过ajax 请求发送表单的值，您可以删除元素form 中的action="submit.php" 属性/值。
@Programer CodingArt给出的答案不是正确答案，它甚至没有解决你在答案中解释的问题。 #form1 元素上的点击事件没有任何作用。
我知道我用提交更改了点击

标签： javascript php jquery html ajax

【解决方案1】：

使用这个 - 有一些语法错误，必须提交事件

 $(function(){
        $("#form1").submit(function(event){
            event.preventDefault();

            $.ajax({
                    url:'submit.php',
                    type:'GET',
                    data:$(this).serialize(),
                    success:function(result){
                        $("#response").text(result);

                    }

            });
        });
    });

【讨论】：

喜欢 click(( $document
是的，不要评论代码中的问题，它属于answer
@dbf 抱歉，朋友有点忙

【解决方案2】：

 $document.ready(function(){

        $("#form1 input[type='submit']").click(function(event){
            event.preventDefault();

            $.ajax({
                    url:'submit.php',
                    type:'GET',
                    data:$(this).serialize(),
                    success:function(result){
                        $("#response").text(result);

                    }

            });
        });
    });

我你的代码 $("#form1").click(.... 在这里没有任何意义......当你按下提交按钮时你想要事件处理程序。所以我认为如果你采取适当的选择器那么它可能会完美运行

【讨论】：

Bingo，现在解释一下？ :)（并在您的答案中编辑解释，而不是作为评论）
yaa sure..$("#form1").click(.... 在这里没有任何意义...当您按下提交按钮时，您需要事件处理程序。所以我认为如果您采用适当的选择器，那么它可能会完美地工作
还有一个小错误，$document.ready 应该是 $(document).ready 或者只是用 jQuery 快捷方式 $ 替换 document.ready。

【解决方案3】：

$("#form1").click((function(event){

改成

$("#form1").submit((function(event){

【讨论】：

【解决方案4】：

函数$(document).ready(function()出错

试试这个

$(document).ready(function(){
        $("#form1").submit(function(event){
            event.preventDefault();

            $.ajax({
                    url:'submit.php',
                    type:'GET',
                    data:$(this).serialize(),
                    success:function(result){
                        $("#response").text(result);

                    }

            });
        });
    });

【讨论】：

试过 $(document) 也把 click() 改成 submit() 但还是没用
@Programer 现在你在 html 表单中删除表单操作属性有什么问题
@codingAnt 的响应是我所知道的 :)

【解决方案5】：

2 备注：

提交函数需要返回false才能停止正常发帖您可以在表单中使用 onsubmit 属性而不是 ready 等，像这样

<form onsubmit="$.ajax({url:'submit.php', type:'GET',data:$(this).serialize(), success:function(result){$("#response").text(result);});return false;" id="form1" method="get" action>

【讨论】：