我有一个
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();不解决问题.
解决方法
我想你应该使用< input type ='button'>而是< button>并且仅使用该< input type ='button'>的.click()事件.如下.
更改
<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="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",async: false
})
.done(function(response)
{
console.log(response);
var result = JSON.parse(response);
})
});
});
尝试以上代码,它为我工作
