通过jQuery AJAX提交HTML表单（）和序列化（） [英] submitting html form via jquery ajax() and serialize()

问题描述

我要提交通过jQuery AJAX这种形式，这就是我已经和它不工作。即表格的提交与刷新页面，我没有看到，即在同一页上打印阵列的响应。

HTML

 ＆LT;链接相对=样式类型=文本/ CSSHREF =CSS /胡椒研磨机/ jQuery的-UI-1.10.4.custom.css/＆GT ;
    ＆LT;脚本类型=文/ JavaScript的SRC =JS / jQuery的-1.10.2.js'＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =JS / jQuery的-UI-1.10.4.custom.min.js'＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;表格ID =Form1上的方法=获得行动=submit.php＆GT;
            ＆LT;标签＆gt;机构名称和LT的; /标签＆gt;
            ＆LT;输入类型=文本名称=ORGNAMEID =ORGNAME级=文本框＆GT;
            ＆LT;标签＆gt;组织与其中的地址; /标签＆gt;
            ＆LT;输入类型=文本名称=OrgAddressID =OrgAddress级=文本框＆GT;
            ＆LT;输入类型=提交值=注册机构＆GT;
        ＆LT; /形式GT;
        ＆LT; D​​IV ID =响应＆GT;广告＆LT; / DIV＆GT;

    ＆LT;脚本＆GT;
    $的document.ready（功能（）{
        $（＃窗口1）。单击（（函数（事件）{
            。事件preventDefault（）;

            $阿贾克斯（{
                    网址：submit.php，
                    键入：GET，
                    数据：$（本）.serialize（）
                    成功：函数（结果）{
                        $（＃响应）文本（结果）。

                    }

            }）;
        }）;
    }）;
    ＆LT; / SCRIPT＆GT;
 

PHP（submit.php）

 ＆LT; PHP
的print_r（$ _ GET）;
？＆GT;
 

解决方案

使用此，他们很少语法错误的

  $（函数（）{
        $（＃窗口1）。点击（函数（事件）{
            。事件preventDefault（）;

            $阿贾克斯（{
                    网址：submit.php，
                    键入：GET，
                    数据：$（本）.serialize（）
                    成功：函数（结果）{
                        $（＃响应）文本（结果）。

                    }

            }）;
        }）;
    }）;
 

I want to submit this form via jquery ajax, this is what I have made and it is not working. i.e. Form is submitting with page refresh and I am not seeing the response i.e. printing array on the same page.

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

解决方案

Use this , their were few syntax errors

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

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

                    }

            });
        });
    });

这篇关于通过jQuery AJAX提交HTML表单（）和序列化（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！