通过jquery ajax(）和serialize(）提交html表单

submitting html form via jquery ajax() and serialize()

本文关键字：提交 html 表单 serialize jquery 通过 ajax      更新时间：2023-09-26

我想通过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);
?>

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

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

 $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（….在这里没有任何意义…你需要在按下提交按钮时使用事件处理程序。所以我认为如果你选择合适的选择器，那么它可能会完美地工作

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

更改为

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

函数$(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);
                    }
            });
        });
    });

2条备注：

submit函数需要返回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>

相关文章：