jQuery - Ajax post请求加载相同的页面,表单数据添加到URL

Question

我有一个HTML注册表单,我在下面附上.

<form id="registerForm">
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="First Name" name="guestFName" title="Up to 20 alphabetical characters" required>
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="Last Name" name="guestLName" title="Up to 20 alphabetical characters" required>
            <input type="email" placeholder="Email" name="guestEmail" title="Must be a valid email address" required>
            <input type="text" pattern="08[36579]-\d{7}" placeholder="Phone Number" name="guestPhone" title="Must be an irish mobile number of format 08?-7 digits" required>
            <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}" placeholder="Password" name="guestPassword" title="Must be 8 or more characters long and contain at least one number and one uppercase letter" required>
            <br>
            <button id="myButton">Register</button>
</form> 

当有人填写python API然后将信息插入MySQL数据库时,我试图从表单中发布信息.

我想要HTML中所需和模式的功能.

我使用jQuery 3.1.1和Ajax将表单数据发布到API.

我的JQuery/Ajax附在下面:

$("#registerForm").submit(function() 
{
    $.ajax(
    {
        url: "URL_GOES_HERE",
        data: $('#registerForm').serialize(),
        type: 'POST',
        async: false
    })
    .done(function(response) 
    {
        console.log(response);

        var result = JSON.parse(response);      
    })
});

我认为这应该工作,但是如果我填写表单并单击"注册"按钮,它会重新加载页面,只是将表单信息添加到URL.

一个例子是:

URL_GOES_HERE/register.html?guestFName=Joe&guestLName=Bloggs&guestEmail=bloggs%40gmail.com&guestPhone=087-1111111&guestPassword=TestPassword1

为什么这样做？

非常感谢所有帮助

编辑:e.preventDefault(); 没有解决问题.

Answer 1

我认为你应该使用下面的事件<input type='button'>来代替。<button>.click()<input type='button'>

改变

<button id="myButton">Register</button>

到

<input type='button' id='btnRegeister' value='Register'/>

而在JS中

改变

$("#registerForm").submit(function()

到

$("#btnRegeister").click(function()

所以你的整个代码现在变成如下..

<form id="registerForm">
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="First Name" name="guestFName" title="Up to 20 alphabetical characters" required>
            <input type="text" pattern="[A-Za-z]{1,20}" placeholder="Last Name" name="guestLName" title="Up to 20 alphabetical characters" required>
            <input type="email" placeholder="Email" name="guestEmail" title="Must be a valid email address" required>
            <input type="text" pattern="08[36579]-\d{7}" placeholder="Phone Number" name="guestPhone" title="Must be an irish mobile number of format 08?-7 digits" required>
            <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}" placeholder="Password" name="guestPassword" title="Must be 8 or more characters long and contain at least one number and one uppercase letter" required>
            <br>
            <input type='button' id='btnRegeister' value='Register'/>
</form>

$(document).ready(function(){
    $("#btnRegeister").click(function() 
    {
       $.ajax(
       {
           url: "URL_GOES_HERE",
           data: $('#registerForm').serialize(),
           type: 'POST',
           async: false
       })
       .done(function(response) 
       {
           console.log(response);

           var result = JSON.parse(response);      
       })
   });
});

尝试上面的代码，它对我有用