Ajax将表单发送到服务器，序列化失败？

Question

It seems like i cant get to serialize my form. 看来我无法序列化表格。 I do get the first alert with lol, but not the second alert with pdata. 我的确收到了带有大声笑的第一个警报，但没有得到带有pdata的第二个警报。 Does anyone see whats wrong? 有人看到错了吗？ Im trying to use ajax to send the data in the form. 我试图使用ajax来发送表单中的数据。 Down below is the script and the html code. 下面是脚本和html代码。

<html>
<head>

    <script>
        function dologin(event) {
            event.preventDefault();

            alert("lol");
            var pdata = $('#form').serialize();
            alert(pdata);

            $.ajax({
                type: 'POST',
                data: pdata,
                url: 'LINK',
                success: function(data) {
                    //console.log(data);
                    alert("YAY");
                },
                error: function() {
                    //console.log(data);
                    alert("NAY");
                } 
            });
        };
    </script>
</head>
<body>
<h1>Logg inn</h1>
    <form id="form" onsubmit="dologin()">
    <div class="form-group">
        <label for="email">Epost</label>
        <input type="email" class="form-control" name="login" value="" placeholder="Epost">
    </div>
    <div class="form-group">    
        <label for="password">Passord</label>
        <input type="password" class="form-control" name="password" value="" placeholder="Passord">
    </div>
    <div class="checkbox">
        <label>
        <input type="checkbox" name="remember_me">
        Husk meg
        </label>
    </div>
        <button type="submit" class="btn btn-default">Logg inn</button>
    </form>

    <div class="login-help">
      <p>Glemt passordet? <a href="index.html">Trykk her for å endre det</a>.</p>
    </div>
</body>
</html>

Answer 1

The problem with your code is, you are accessing event argument wheres there is no parameter passed to the function, so its triggering an error and submitting the form as normal form submission. 代码的问题是，您正在访问事件参数，在该事件参数中没有参数传递给该函数，因此它触发错误并以正常表单提交的形式提交表单。

If you like to keep your implementation u can modify your code like bellow: 如果您想保留自己的实现，则可以像下面这样修改代码：

function dologin() {

    alert("lol");
    var pdata = $('#form').serialize();
    alert(pdata);

    $.ajax({
        type: 'POST',
        data: pdata,
        url: 'LINK',
        success: function(data) {
            //console.log(data);
            alert("YAY");
        },
        error: function() {
            //console.log(data);
            alert("NAY");
        }
    });

   return false;
};

and modify this line 并修改此行

<form id="form" onsubmit="dologin()">

to 至

<form id="form" onsubmit="return dologin()">

or can use the following way 或可以使用以下方式

$(document).ready(function() {
    $('#form').submit(function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            data: $(this).serialize(),
            url: 'LINK',
            success: function(data) {
                //console.log(data);
                alert("YAY");
            },
            error: function() {
                //console.log(data);
                alert("NAY");
            }
        });
    });
});

And form tag should be then: 表单标签应为：

<form id="form">

Ajax将表单发送到服务器，序列化失败？

问题描述

1 个解决方案

解决方案1
0 2014-03-31 15:07:00

Ajax将表单发送到服务器，序列化失败？

问题描述

1 个解决方案

解决方案1 0 2014-03-31 15:07:00

解决方案1
0 2014-03-31 15:07:00