防止页面刷新和提交表单数据
Posted
技术标签:
【中文标题】防止页面刷新和提交表单数据【英文标题】:Prevent page refresh and submit form data 【发布时间】:2017-01-15 10:44:31 【问题描述】:所以我正在尝试提交表单数据,但不希望页面更改/刷新。同时,我希望在完成后弹出一个 jquery 对话框。
这是我的原创:
<script>
$( function()
$('#dialog-message').dialog(
autoOpen: false,
title: 'Basic Dialog'
);
$( "#subbutton" ).click(function( event )
event.preventDefault();
$.post("formaction.php",function()
$('#dialog-message').dialog('open');
return false;
);
);
);
</script>
这会将空白数据提交到数据库,但它确实插入了一个新行。删除 event.preventDefault();提交所有数据,但页面更改为 formaction.php。
我尝试进行投票,但我不确定如何正确进行。我将在几台不同的计算机上提供该代码。
$( function()
$('#dialog-message').dialog(
autoOpen: false,
title: 'Basic Dialog'
);
);
$( "#subbutton" ).click(function( event )
$('#dialog-message').dialog('open');
event.preventDefault();
$(function poll()
setTimeout( function()
$.ajax(
type:'POST',
dataType: 'json',
url:'formaction.php',
success: function(data)
,
complete: poll
),
,
5000);
)
/*
$.post("formaction.php",function()
return false;
);
event.preventDefault();
*/
);
poll();
添加表单以获取更多详细信息
<div id="lostForm">
<form name="lostForm" method="post" action="formaction.php" enctype="multipart/form-data">
<h1> Owner Information</h1>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="First name" required>
<br> <br>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Last name" required>
<br> <br>
<label for="mnumber">Mobile</label>
<input id="mnumber" name="mobilenumber" placeholder=" (###)###-####" required>
<br> <br>
<label for="email">Email</label>
<input type="text" id="email" name="email" placeholder="email@example.com" required>
<br>
<br>
<hr>
<h1> Pet Information </h1>
<br>
<label for="pname">Pet Name</label>
<input type="text" id="pname" name="petname" placeholder="Pet Name" required>
<br> <br>
<label for="petgen">Pet Gender</label>
<select name="petgen" id="petgen" required>
<option value="male"> Male </option>
<option value="female"> Female </option>
</select>
<br> <br>
<label for="pname">Pet Age</label>
<input type="text" id="page" name="petage" placeholder="How old is your pet?" required>
<br> <br>
<label for="primary">Primary Color</label>
<select name="color1" id="primary" required>
<option value="black"> Black </option>
<option value="brindle"> Brindle </option>
<option value="cream"> Cream </option>
<option value="red"> Red </option>
<option value="white"> White </option>
<option selected="selected" value="none"> --none-- </option>
</select>
<br> <br>
<label for="secondary">Second Color</label>
<select name="color2" id="secondary" required>
<option value="black"> Black </option>
<option value="brindle"> Brindle </option>
<option value="cream"> Cream </option>
<option value="red"> Red </option>
<option value="white"> White </option>
<option selected="selected" value="none"> --none-- </option>
</select>
<br> <br>
<label for="markings">Markings</label>
<input type="text" id="markings" name="marking" placeholder="Indetifiable Markings" optional>
<br><br>
<label for="fileToUpload">Upload Image:</label>
<br>
<input id="fileToUpload" type="file" name="fileToUpload">
<br>
<br>
<hr>
<h1> Location Lost </h1>
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td class="label">Street address</td>
<td class="slimField"><input class="field" id="street_number"
disabled="true" name="streetAdd"></input></td>
<td class="wideField" colspan="2"><input class="field" id="route"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true" name="city"></input></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input class="field"
id="administrative_area_level_1" disabled="true" name="state"></input></td>
<td class="label">Zip code</td>
<td class="wideField"><input class="field" id="postal_code"
disabled="true" name="zip"></input></td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3"><input class="field"
id="country" disabled="true"></input></td>
</tr>
</table>
<button type="submit" value="Submit" name="submitbtn" id="subbutton">Submit </button>
</form>
【问题讨论】:
您要求两个不同的东西:“提交表单”,但“不要刷新页面”。为此,您必须使用 AJAX,否则您无法在不刷新页面的情况下发送表单数据。 我尝试按照教程进行操作,并且一直在使用 ajax。现在更新原帖 【参考方案1】:您的 ajax $.post()
函数缺少您要插入的数据。
添加它的最简单方法是序列化表单:
...
event.preventDefault();
$.post("formaction.php", $('form').serialize(), function()
$('#dialog-message').dialog('open');
);
现在form
元素中的所有字段都将添加到帖子中。如果您有多个表单,您可以使用表单的 id 来获取正确的一个:
$.post("formaction.php", $('#your_form').serialize(), function()
$('#dialog-message').dialog('open');
);
【讨论】:
我会试试看(: 我试过了,但它仍然在做和以前一样的事情。出现对话框,数据库中添加了新行,但没有实际数据。 我已将表格添加到原帖中 @Squeakasaur 这应该适用于普通形式。但是,ajax 中的文件上传要复杂一些,例如参见 ***.com/a/10899796/42139 只有当我删除 event.preventDefault(); .如果我这样做,弹出窗口会出现,但随后会转到我不想要的 php 页面。【参考方案2】:为此使用 ajax。
$.ajax(
type: "POST",
url:"<?php yourpage.php;?> ",
data:your data,
success: function(html)
//show your message
);
【讨论】:
OP已经在使用ajax,$.post()
是$.ajax()
的简写方法。
所以对于 Success 部分,我希望弹出一个 jquery 对话框,但要成功: function(data) $('#dialog-message').dialog('open'); 没用。我一定是错过了什么
可能函数没有通过sucess : function(data) /* ... */
。尝试在success
之后添加一个附加属性,如下所示:error : function() console.log('error');
。如果它通过错误,您可能需要调试您的 php 文件。
据我所知,php 文件没问题。问题是使用 preventDefault() 数据实际上并没有成功。这是一个朋友说的:“所以使用 prevent default ,它基本上可以实现,所以你不能重定向。没有它,发生的是你的页面在 AJAX 调用执行之前提交,因为它是异步的,你需要做的是,是提交您的数据库调用并实施轮询操作,在每个时间间隔查询您的数据库。一旦它在那里看到记录。重定向“但我不知道如何进行轮询【参考方案3】:
您将需要使用 :success 回调函数。
$.post( "test.php", name: "John", time: "2pm" )
.done(function( data )
alert( "Data Loaded: " + data );
);
【讨论】:
【参考方案4】:有一个简单的解决方案可以停止重定向。
更改按钮类型(#subbutton) 添加属性type="button"
【讨论】:
以上是关于防止页面刷新和提交表单数据的主要内容,如果未能解决你的问题,请参考以下文章