AJAX调错,为什么在$.ajax({});后面写alert();才能刷新成功?

吴承烨 2014-09-16 04:13:00
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="Style/tableStyle.css" rel="stylesheet" />
<link href="Style/style.css" rel="stylesheet" />
<script src="JQ/jquery-1.7.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

#divLeft {
width: 500px;
border: 1px solid red;
float: left;
}

#divRight {
width: 500px;
height: 500px;
border: 1px solid green;
margin-left: 500px;
}
</style>
<script type="text/javascript">
//===================
// 加载页面
//===================
$(function () {
initTable();//初始化表格
});
//===================
// 页面初始化
//===================
function initTable() {
$.ajax({
type: "post"
, data: ""//发送后台数据
, url: "Buttle_Select_Buttle.ashx"
, dataType: "json"//后台返回数据的类型
, success: function (goBack) {
$("#Main").html();
for (var i in goBack) {
var strTr = "<tr>";
strTr += "<td>" + goBack[i].Id; +"</td>";
strTr += "<td>" + goBack[i].Name; +"</td>";
strTr += "<td>" + goBack[i].Age; +"</td>";
strTr += "<td>" + goBack[i].Interest; +"</td>";
strTr += "<td><a id=" + goBack[i].Id + " href='#'>详细</td>";
strTr += "<td><a id=" + goBack[i].Id + " href='#'>修改</td>";
strTr += "<td><a id=" + goBack[i].Id + " href='#'>删除</td>";
strTr += "</tr>"
$("#Main").append(strTr);
}
Select_Particular();//绑定详细事件
Update(); //修改页面
Delete(); //删除数据
}
});
}
//===================
// 详细
//===================
function Select_Particular() {
$("#Main a:contains('详细')").click(function () {
var id = $(this).attr("id");
$.ajax({
type: "Post" //请求方式
, url: "Bttle_SelectXiang_Buttle.ashx" //请求地址
, data: "id=" + id
, dataType: "json" //后台返回数据的类型,不写的话,不显示数据
//, async: false
, success: function (goBack) {
for (var i in goBack) {
$("#Name")[0].value = goBack[i].Name;
$("#Age")[0].value = goBack[i].Age;
$("#Interest")[0].value = goBack[i].Interest;
}
}
});
});
}
//===================
// 添加
//===================
function Add() {
$("#sub").click(function () {
var input = $("#form2").serializeArray();
$.ajax({
type: "post"
, url: "Buttle_Add_Buttle.ashx"
, data: input
, dataType: "text"
//,timeout:3000
//,cache:true
, success: function (BackData) {
if (BackData == "1") {
alert("添加成功");
}
else if (BackData == "0") {
alert("添加失败");
}
else if (BackData == "Invalid format") {
alert("数据类型错误,添加失败"); //数据类型错误
}
}
//, error: function (msg) { alert("error"); }
//, complete: function (XMLHttpRequest, BackData) { XMLHttpRequest = null }
});
//alert(1);
});
}
//===================
// 修改数据
//===================
function Update() {
$("#Main a:contains('修改')").click(function () {
var id = $(this).attr("id");
$.ajax({
type: "Post" //请求方式
, url: "Bttle_SelectXiang_Buttle.ashx" //请求地址
, data: "id=" + id
, dataType: "json" //后台返回数据的类型,不写的话,不显示数据
, success: function (goBack) {
for (var i in goBack) {
$("#UpName")[0].value = goBack[i].Name;
$("#UpAge")[0].value = goBack[i].Age;
$("#UpInterest")[0].value = goBack[i].Interest;
$("#UpId")[0].value = goBack[i].Id;
}
}
});
});
$("#btnUp").click(function () {
var postData = $("#form3").serializeArray();
$.post("Buttle_Update_Buttle.ashx", postData, function (data) {
//alert(1);
if (data == "成功") {
alert("修改成功");
initTable();//刷新表格
} else {
alert("修改失败");
}
});
});
}
//===================
// 删除数据
//===================
function Delete() {
$("#Main a:contains('删除')").click(function () {
var id = $(this).attr("id");
$.ajax({
type: "Post" //请求方式
, url: "Buttle_Delete_Buttle.ashx" //请求地址
, data: "id=" + id
, dataType: "text" //后台返回数据的类型,不写的话,不显示数据
, success: function (goBack) {
if (goBack == "1") {
alert("删除成功");
}
else {
alert("删除失败");
}
}
});
});
}
</script>
</head>
<body>
<div id="divLeft">
<table border="1">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>兴趣</th>
<th>查询</th>
<th>修改</th>
<th>删除</th>
</tr>
<tbody id="Main"></tbody>
</table>
</div>
<div id="divRight">
<form id="form2">
姓名<input type="text" name="Name" id="Name" value="" /><br />
年龄<input type="text" name="Age" id="Age" value="" /><br />
兴趣<input type="text" name="Interest" id="Interest" value="" /><br />
<input type="submit" value="添加" id="sub" />
</form>
<br />
<form id="form3">
编号<input type="text" name="UpId" id="UpId" value="" /><br />
姓名<input type="text" name="UpName" id="UpName" value="" /><br />
年龄<input type="text" name="UpAge" id="UpAge" value="" /><br />
兴趣<input type="text" name="UpInterest" id="UpInterest" value="" /><br />
<input type="submit" value="修改" id="btnUp" />
</form>
</div>
</body>
</html>
...全文
301 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
knife_s 2014-09-18
  • 打赏
  • 举报
 回复
如果确定哪里有问题，用浏览器单步一下
mc_dv 2014-09-18
  • 打赏
  • 举报
 回复
把那个需要alert才能刷新的改成同步试试 .
叫我 Teacher 周 2014-09-18
  • 打赏
  • 举报
 回复
这么长，你确定全部有错吗
save4me 2014-09-18
  • 打赏
  • 举报
 回复
需要在你自己项目测试上面的代码的话，initTable改成 

function initTable() {
    $.get(
        'Buttle_Select_Buttle.ashx',
        function(res) {
            var data = parseJSON(res);
            var items = [];
            $.each(data, function(index, item) {
                var strTr = "<tr id=" + item.Id + ">";
                strTr += "<td>" + item.Id +"</td>";
                strTr += "<td>" + item.Name +"</td>";
                strTr += "<td>" + item.Age +"</td>";
                strTr += "<td>" + item.Interest +"</td>";
                strTr += "<td><a href='javascript:void(0);' class='btnSelect'>详细</td>";
                strTr += "<td><a href='javascript:void(0);' class='btnUpdate'>修改</td>";
                strTr += "<td><a href='javascript:void(0);' class='btnDelete'>删除</td>";
                strTr += "</tr>";
                items.push(strTr);
            })
            $("#Main").html(items.join(''));
        }        
    );
}
save4me 2014-09-18
  • 打赏
  • 举报
 回复
删掉了一些元素，修改了些代码，在线演示代码，可以点击看看。 你表格查询详情的内容其实在表格里面都有了，所以没有必要每次都再向服务器请求，除非你对数据的实时性要求比较高，否则直接把表格里面的内容自动填到右边表单就可以了，下面的代码就是这么处理的。 点击表格里面的修改按钮，也会自动把相应行的内容填到右边表单里面，表单右边的按钮会变成"提交修改"并取消disabled，编辑好后，点击提交修改，可以发送到服务器，如果成功，则重置表单，并从服务器刷新左边表格，按钮变回"提交新记录"并disabled。 点击右边表单左边的添加按钮，会重置表单，以便填写数据，右边按钮取消disabled。填好之后，点击提交新记录，可以发送到服务器，如果成功，则重置表单，并从服务器刷新左边表格，按钮变回"提交新记录"并disabled。 点击表格里面的删除按钮，如果成功，并从服务器刷新左边表格。 服务器返回的状态都设成json的，用不同的数字表示不同的状态。 

<div id="divLeft">
    <table border="1">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>兴趣</th>
            <th>查询</th>
            <th>修改</th>
            <th>删除</th>
        </tr>
        <tbody id="Main"></tbody>
    </table>
</div>
<div id="divRight">
    <form id="form">
        编号<input type="text" name="Id" id="fId" value="" disabled /><br />
        姓名<input type="text" name="Name" id="fName" value="" /><br />
        年龄<input type="text" name="Age" id="fAge" value="" /><br />
        兴趣<input type="text" name="Interest" id="fInterest" value="" /><br />
        <input type="button" value="添加" id="btnAdd" />
        <input type="button" value="提交新记录" id="btnSubmit" disabled="disabled" />
    </form>
</div>


* {
    margin: 0px;
    padding: 0px;
}

#divLeft {
    width: 300px;
    border: 1px solid red;
    float: left;
}

#divRight {
    width: 200px;
    height: 500px;
    border: 1px solid green;
    margin-left: 320px;
}


//===================
//      加载页面
//===================
$(function() {
    initTable();//初始化表格
    initButton();
});

//===================
//     页面初始化
//===================
function initTable() {
    $.get(
        '',//'Buttle_Select_Buttle.ashx',
        function(res) {
            var d = [
                {Id: 1, Name: 'n1', Age: 18, Interest: 'hh1'},
                {Id: 2, Name: 'n2', Age: 28, Interest: 'hh2'},
                {Id: 3, Name: 'n3', Age: 38, Interest: 'hh3'},
                {Id: 4, Name: 'n4', Age: 48, Interest: 'hh4'},
                {Id: 5, Name: 'n5', Age: 58, Interest: 'hh5'}
            ];
            var data = d;//parseJSON(res);
            var items = [];
            $.each(data, function(index, item) {
                var strTr = "<tr id=" + item.Id + ">";
                strTr += "<td>" + item.Id +"</td>";
                strTr += "<td>" + item.Name +"</td>";
                strTr += "<td>" + item.Age +"</td>";
                strTr += "<td>" + item.Interest +"</td>";
                strTr += "<td><a href='javascript:void(0);' class='btnSelect'>详细</td>";
                strTr += "<td><a href='javascript:void(0);' class='btnUpdate'>修改</td>";
                strTr += "<td><a href='javascript:void(0);' class='btnDelete'>删除</td>";
                strTr += "</tr>";
                items.push(strTr);
            })
            $("#Main").html(items.join(''));
        }        
    );
}
function line2form(el) {
    var cell = $(el).parents('tr').children('td');
    $('#fId').val(cell[0].innerHTML);
    $("#fName").val(cell[1].innerHTML);
    $("#fAge").val(cell[2].innerHTML);
    $("#fInterest").val(cell[3].innerHTML);
}
function resetform() {
    $('#fId').val('');
    $("#fName").val('');
    $("#fAge").val('');
    $("#fInterest").val('');
    $('#btnSubmit').val('提交新记录').attr('disabled', 'disabled');
}
function Add() {
    var input = $("#form").serialize();
    $.post(
        'Buttle_Add_Buttle.ashx',
        input,
        function(res) {
            var data = parseJSON(res);
            if (data.status == 1) {
                alert("添加成功");
                resetform();
                initTable();//刷新表格
            }
            else if (data.status == 0) {
                alert("添加失败");
            }
            else if (data.status == 2) {
                alert("数据类型错误,添加失败"); //数据类型错误
            }
        }
    )
}
function Update() {
    var input = $("#form").serialize();
    $.post(
        'Buttle_Update_Buttle.ashx',
        input,
        function (res) {
            var data = parseJSON(res);
            if (data.status == 1) {
                alert("修改成功");
                resetform();
                initTable();//刷新表格
            }
            else if (data.status == 0) {
                alert("修改失败");
            }
        }
    )
}
function initButton() {
    //===================
    //      详细
    //===================
    $(document).on(
        'click',
        '#Main a.btnSelect',
        function(evt){
            line2form(evt.target);
        }
    );
    //===================
    //      添加
    //===================
    $(document).on(
        'click',
        '#btnAdd',
        function() {
            resetform();
            $('#btnSubmit').removeAttr('disabled');
        }
    );
    //===================
    //      修改数据
    //===================
    $(document).on(
        'click',
        '#Main a.btnUpdate',
        function(evt){
            line2form(evt.target);
            $('#btnSubmit').val('提交修改').removeAttr('disabled');
        }
    )
    $(document).on(
        'click',
        '#btnSubmit',
        function() {
            var val = $('#btnSubmit').val();
            if(val == '提交新记录') {
                Add();
            } else if(val = '提交修改') {
                Update();
            }
        }
    );
    //===================
    //      删除数据
    //===================
    $(document).on(
        'click',
        '#Main a.btnDelete',
        function () {
            var id = $(this).parents('tr').attr('id');
            console.log(id);
            $.post(
                'Buttle_Delete_Buttle.ashx',
                {'id': id},
                function (res) {
                    var data = parseJSON(res);
                    if (data.status == 1) {
                        alert("删除成功");
                        initTable();//刷新表格
                    }
                    else if (data.status == 0) {
                        alert("删除失败");
                    }
                }
            );
        }
    );
}
nitaiyoucala 2014-09-17
  • 打赏
  • 举报
 回复
请详细描述，太模糊了啊
myhope88 2014-09-17
  • 打赏
  • 举报
 回复
哪处代码有这个问题呢
正宗熊猫哥 2014-09-17
  • 打赏
  • 举报
 回复
代码没看完，头晕了
save4me 2014-09-17
  • 打赏
  • 举报
 回复
你在 $("#btnUp").click通过ajax更新表单之后又调用了initTable()，这又是一次ajax，所以没有那么快返回。你试试不用alert，过一会儿是不是也会刷新成功。 另外，可能更好的做法是在$("#btnUp").click的这个ajax直接返回数据，而不是通过initTable()再调用一次ajax从服务器请求数据， 还有initTable的success里面的$("#Main").html();这句是取元素内容，而不是清空元素内容，清空是$("#Main").html(''); 还有initTable的success里面的Select_Particular()，Update()和Delete()这几句没有必要每次初始化表格的时候都绑定一次事件，可以使用类似$(document).on('click', '#Main a:contains("详细")', function(){})绑定一次就可以了，这个方法就算后面的表格是动态生成的，也可以自动绑定事件。
一片冰心在玉壶 2014-09-16
  • 打赏
  • 举报
 回复
那里刷新了？那个函数？提问题麻烦你说清楚，这么长要我们一行行的去看啊？
关于JQuery中$.get()和$.post()和$.ajax()的区别和使用
首先，这三个方法都是Ajax方法中一种与服务器交换数据的请求类型。   一、$.get() 　$.get() 方法使用 HTTP GET 请求从...　data为请求数据的列表(是可选的，也可以将要传的参数写在url里面)， 　callback...
$.ajax()函数
$.ajax()函数一般在前端html和服务器交互，又要异步提交表单时，我们通常会用到$.ajax(){}函数，这是封装到ajax里的一个函数，相比于XMLHTTPRequest做页面局部刷新更方便，但最终还是使用的XMLHTTPRequest，下面记录...
$.ajax的回调function中的this与 element-ui的this.$alert冲突问题解决
代码大致如下,vue中使用 element-ui的组件 this.alert会报错误，因于与alert会报错误，因于与alert会报错误，因于与.ajax的回调函数中的this冲突，解决方法是将this.alert的this改为vue对象的名称vm.alert的this改为...
ajax，jquery，$.post/$.get异步刷新div,局部刷新页面
ajax，jquery，$.post/$.get异步刷新div,局部刷新页面 2013-08-14 14:50890326yaoyao | 分类：Html/Css | 浏览1185次 Action为struts2 a.jsp 分享到： 2013-08...
jQuery中的$.ajax()方法参数详解
jQuery中的$.ajax()方法参数详解ajax是异步更新，只需要进行少量的数据交互便可到达页面的局部刷新。其可用参数主要如下：1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type:要求为String...
.NET社区

62,041

社区成员

669,051

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章