Javascript 使用Ajax和PHP脚本将数据保存到数据库后，jQuery选项卡不起作用
我正在使用Ajax和PHP脚本将数据保存到数据库中 我使用javascript选项卡。请查看我的代码Javascript 使用Ajax和PHP脚本将数据保存到数据库后，jQuery选项卡不起作用,javascript,php,jquery,mysql,ajax,Javascript,Php,Jquery,Mysql,Ajax,我正在使用Ajax和PHP脚本将数据保存到数据库中 我使用javascript选项卡。请查看我的代码 <html> <head> <title>home</title></pre> <!-- include jquery library file--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.
<html>
<head>
<title>home</title></pre>
<!-- include jquery library file-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.3/jquery-ui.js"></script>
<!-- The ajax/jquery stuff -->
<script type="text/javascript">
var currentTab = 0;
$(function () {
$("#tabs").tabs({
select: function (e, i) {
currentTab = i.index;
}
});
});
var tabs = $('#tabs').tabs();
var c = $('#tabs').tabs("length");
currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
tabs.tabs('select', currentTab);
$("#btnPrevious").show();
if (currentTab == (c - 1)) {
$("#btnNext").hide();
} else {
$("#btnNext").show();
}
$(document).ready(function() {
$("#btnNext").click(function() {
//Get values of the input fields and store it into the variables.
var ID=$("#ID").val();
var Name=$("#Name").val();
var Email=$("#Email").val();
//use the $.post() method to call insert.php file.. this is the ajax request
$.post('insert.php', {ID: ID, Name: Name, Email: Email},
function(data) {
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); //Fade in the data given by the insert.php file
});
return false;
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
<li><a href="#tabs-4">Tab 4</a></li>
<li><a href="#tabs-5">Tab 5</a></li>
</ul>
<div id="tabs-1">
<label>ID: </label> <input id="ID" type="text" />
<label>Name: </label> <input id="Name" type="text" />
<label>E-Mail: </label> <input id="Email" type="text" />
<button id="btnNext" title="Insert Data">Push into mysql</button>
<!-- For displaying a message -->
</div>
<div id="tabs-2">
<div id="message"></div>
<span class="payment-errors"></span>
<form action="charge.php" method="POST" id="payment-form">
<div class="form-row">
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" class="card-number" />
</div>
<div class="form-row">
<label>CVC</label>
<input type="text" size="4" autocomplete="off" class="card-cvc" />
</div>
<div class="form-row">
<label>Expiration (MM/YYYY)</label>
<input type="text" size="2" class="card-expiry-month"/>
<span> / </span>
<input type="text" size="4" class="card-expiry-year"/>
</div>
<button type="submit" id="btnNext" class="submit-button">Donate!</button>
</form>
</div>
<div id="tabs-3">
Tab 3 Content
</div>
<div id="tabs-4">
Tab 4 Content
</div>
<div id="tabs-5">
Tab 5 Content
</div>
</div>
家
var currentTab=0；
$（函数（）{
$（“#制表符”）。制表符({
选择：功能（e，i）{
currentTab=i.index；
}
});
});
var tabs=$（'#tabs'）.tabs（）；
变量c=$（'#tabs'）。tabs（“长度”）；
当前选项卡=当前选项卡==（c-1）？currentTab：（currentTab+1）；
tabs.tabs（'选择'，当前选项卡）；
$（“#btnPrevious”）.show（）；
如果（currentTab==（c-1））{
$（“#btnNext”）.hide（）；
}否则{
$（“#btnNext”）.show（）；
}
$（文档）.ready（函数（）{
$（“#btnNext”）。单击（函数（）{
//获取输入字段的值并将其存储到变量中。
var ID=$（“#ID”）.val（）；
var Name=$（“#Name”）.val（）；
var Email=$（“#Email”）.val（）；
//使用$.post（）方法调用insert.php文件。这是ajax请求
$.post（'insert.php'，{ID:ID，Name:Name，Email:Email}，
功能（数据）{
$（“#消息”）.html（数据）；
$（“#消息”）.hide（）；
$（“#message”）.fadeIn（1500）；//淡入insert.php文件给出的数据
});
返回false；
});
});
身份证件：
姓名：
电邮：
推入mysql
卡号
CVC
有效期（年月日）
/
捐赠
表3内容
表4内容
表5内容
我想将两个数据都保存在数据库中，然后单击按钮切换到tab2。有什么建议吗？在这次事件中，可能会出现一些javascript错误，破坏了未来javascript代码的执行。我们如何克服它？您应该使用浏览器控制台进行调查，如果只是在将代码放入AJAX返回块时，浏览器控制台不起作用（成功/完成）然后我怀疑这可能是由于
异步性currentTab