Ajax功能无法正常工作
[英]Ajax function not working properly
问题描述
我正在尝试使用ajax进行基本数据库插入，并且插入部分工作正常，问题是页面在插入完成后被重定向了。我之前曾来过acroos这个问题并找到了解决方案（更改了src部分，如下所示）
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
但是这次解决方案没有用，我又在做什么错？
这是index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="site.js"></script>
</head>
<body>
<form action="process.php" id="myForm"method="post">
<input type="text" name="uname"><br>
<input type="text" name="pass"><br>
<input type="text" name="fname"><br>
<input type="text" name="lname"><br>
<button id="submit" value="Insert"/> <br>
</form>
<div id="ack"></div>
</body>
</html>
这是我的剧本
$("#submit").click( function() {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info) {
$("#ack").empty();
$("#ack").html(info);
clear();
});
});
$("#myForm").submit( function(event) {
event.preventDefault();
return false;
});
function clear() {
$("#myForm :input").each( function() {
$(this).val("");
});
}
4 个解决方案
解决方案1
1 2016-09-30 19:56:01
如果您想避免通过您创建的点击处理程序以外的其他方式提交表单，则提交调用实际上并不属于点击处理程序，请将其移出并使用event.preventDefault（）。
$("#submit").click( function() {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info) {
$("#ack").empty();
$("#ack").html(info);
clear();
});
});
$("#myForm").submit( function(event) {
event.preventDefault();
return false;
});
function clear() {
$("#myForm :input").each( function() {
$(this).val("");
});
}
解决方案2
0 2016-09-30 20:25:31
切换到.submit（）事件处理程序：
$("#myForm").submit(function(event) {
$.post($("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info) {
$("#ack").empty();
$("#ack").html(info);
clear();
});
event.preventDefault();
});
解决方案3
0 2016-09-30 21:11:54
描述
- 在提交处理程序函数中包装$ .post代码。
- 使用event.preventDefault（）函数可防止提交表单。
- 使用$（'＃myform'）[0] .reset（）清除输入字段，而不要使用单独的clear函数。
码
$("#myForm").submit(function (event) {
$.post($("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function (info) {
$("#ack").empty();
$("#ack").html(info);
// instead of using the clear() function
// separately you may clear all the empty
// fields like this
$('#myform')[0].reset();
});
event.preventDefault();
});
解决方案4
0 2016-09-30 21:41:47
不知道这是否适用于jQuery 1.8.2，但是这是我过去完成同一件事的方式。
$('#myForm').on('submit', function(e) {
e.preventDefault();
var details = $('#myForm').serialize();
$.post('process.php', details, function(data) {
$('#ack').html(data);
$('#myForm').trigger("reset");
});
});
Ajax成功功能无法正常工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.