Question

我正在建立一个寄存器。底部的“创建帐户”：

<input type="submit" onclick="sendObj();" value="Create"/>

我想将json数据发送到服务器和sendObj（）的源：

function sendObj() {

var user = new Object();

user.firstName = $('#firstName').val();
user.lastName = $('#lastName').val();
user.username = $('#username').val();
user.password = $('#password').val();
user.password1 = $('#password1').val();
user.phoneNumber = $('#phoneNumber').val();
user.email = $('#email').val();

$.ajax(
    {
        url: "signup",
        type: 'POST',
        dataType: 'json',
        data: JSON.stringify(user),
        contentType: 'application/json',
        // mimeType: 'application/json',

        success: function (message)
        {
        }
    }
);
return false;
}

但是当我提交时，会发送2个POST请求。

使用json进行一次XHR发布请求：

{"firstName":"vuong","lastName":"le","username":"vking34","password":"bla","password1":"bla","phoneNumber":"01662228388","email":"vking3416@mgial.com"}

和params的一个正常的帖子请求：

firstName=vuong&lastName=le&username=vking34&password=bla&password1=bla&phoneNumber=01662228388&email=vking3416%40mgial.com

所以在服务器端，我使用jackson来解析json字符串。但在第二个请求中，肯定存在无法识别的令牌。

com.fasterxml.jackson.core.JsonParseException: Unrecognized token...

然后servlet立即将响应（代码状态：500）发送回客户端。

我很奇怪为什么ajax几乎同时发送2个不同的POST请求。请告诉我如何解决它。

感谢您的关注。

Answer 1

这是因为按钮上的click事件也会导致父form元素提交。

要解决此问题，请将事件处理程序附加到form元素，然后使用preventDefault()停止标准提交。像这样：

<form id="your-form" method="post" action="/foo">
  <!-- your form fields here... -->
  <input type="submit" value="Create" />
</form>

$(function() {
  $('#your-form').on('submit', function(e) {
    e.preventDefault();

    $.ajax({
      url: "signup",
      type: 'POST',
      dataType: 'json',
      data: {
        firstName: $('#firstName').val(),
        lastName: $('#lastName').val(),
        username: $('#username').val(),
        password: $('#password').val(),
        password1: $('#password1').val(),
        phoneNumber: $('#phoneNumber').val(),
        email: $('#email').val()
      },
      contentType: 'application/json',
      success: function(message) {
        console.og(message);
      }
    });
  });
});

请注意此处使用不显眼的事件处理程序，应始终使用它来代替直接放置在HTML中的过时on*事件属性。

jquery ajax同时发送一个2 json和params post请求

1 个答案: