无法在不重新加载页面的情况下提交表单
not able to submit form without page reloading
我希望使用以下代码来提交表单而无需重新加载页面,但它重新加载了整个页面,并且在控制台中签入脚本.php页面时也没有被执行。
索引.php页上的代码
<script>
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
var dataString = 'name=' + name;
console.log(dataString);
$.ajax({
type: "POST",
url: "script.php",
data: dataString,
success: function() {
$('#result').html(response);
}
});
return false;
});
});
</script>
<form method="post" name="form">
<input id="name" name="name" type="text" />
<input type="submit" value="Submit" class="submit" />
</form>
<div id="result"></div>
脚本.php页面上的代码
<?php
$name=$_POST['name'];
echo $name;
?>
任何人都可以告诉我如何在不重新加载页面的情况下提交表单,并在索引.php页面上显示脚本.php页面的结果
更新函数。 在函数中传递事件对象。 并使用 event.preventDefault() 来阻止默认提交操作。
$(".submit").click(function(e) {
e.preventDefault();
试试这个
<script>
$(function() {
$(".submit").click(function(event) {
event.preventDefault();
var name = $("#name").val();
var dataString = 'name=' + name;
console.log(dataString);
$.ajax({
type: "POST",
url: "script.php",
data: dataString,
success: function() {
$('#result').html(response);
}
});
return false;
});
});
或
<input type="button" class="submit" />Submit
您需要将数据从脚本.php页发送回索引.php页。为此刷掉一点点 ajax:
$.ajax({
type: "POST",
url: "script.php",
data: "datastring",
dataType: "json",
success: function(dataType){
$("#result").html(dataType);
}
});
在脚本中.php:
<?php
$name=$_POST['name'];
echo json_encode($name);
?>
不要混合表单submit
和按钮click
。
如果您是button
的click
事件,请使用type="button"
,如果您正在执行$("form").submit()
则使用type="submit"
。
还要检查
$(".submit").click(function(e) {
e.preventDefault();
并检查您的ajax
帖子data
,执行
$.ajax({
type: "POST",
url: "script.php",
//changes made here
data: { name: $("#name").val()},
//changes made here. you have not written response
success: function(response) {
$('#result').html(response);
}
});
与其侦听输入的click
事件,不如侦听表单的submit
。
<script>
$(function() {
$("#name-form").on('submit', function(e) {
e.preventDefault(); // prevent form submission
var name = $("#name").val();
var dataString = 'name=' + name;
console.log(dataString);
$.ajax({
type: "POST",
url: "script.php",
data: dataString,
success: function(response) {
$('#result').html(response);
}
});
});
});
</script>
<form id="name-form" method="post" name="form">
<input id="name" name="name" type="text" />
<input type="submit" value="Submit" class="submit" />
</form>
<div id="result"></div>
相关文章:
- 如何在我的情况下禁用表单提交
- 如何在不重新加载的情况下提交表单,并使用Node+Express将数据传递回同一页面
- 在不使用PHP的情况下将表单输入值获取到Javascript中
- 一个具有两个图像按钮的表单在只能按下一个按钮的情况下发送两个按钮值
- 如何在没有按钮的情况下提交表单
- 表单验证工作不正常,在不检查条目的情况下继续
- 如何在不提交表单的情况下使用jQuery.validate
- 如何在没有表单提交、没有js、没有jquery和没有ajax的情况下将输入的文本框值存储到php变量中
- 如何在不刷新页面的情况下每次单击一组选项卡时刷新视图内容窗格
- 单输入表单 - 特殊情况 |停止表单提交
- 如何在不刷新页面的情况下发送表单
- Ember:在没有硬编码的情况下在页面加载时锁定表单“;禁用”;
- 如何在不打开新窗口的情况下在单页应用中执行 Dropbox 身份验证
- Chrome HTML document.execCommand('inserthtml' 插入到下表单
- 按下表单重置按钮时删除 JavaScript 元素
- 在启用(“click”)的情况下获取单击的元素属性
- 执行任务时,tab或enter按下表单输入文本与骨干/木偶
- 为什么变量在一种情况下用单引号发送,而在另一种情况下不加引号
- 在不使用全局作用域的情况下,单击将数字推送到Array
- 在没有命名空间的情况下引用单例体到单例体,但是如何