在另一个$ .ajax中调用$ .ajax函数

Question

I have two $.ajax functions. Second function must run in first $.ajax Success function. The code is here:

 loadSelectedData = function (id) { vex.dialog.buttons.YES.text = 'ویرایش'; vex.dialog.buttons.NO.text = 'انصراف'; jQuery.ajax({ type: "POST", url: "LastNewsProfileReport.aspx/GetData", data: "{ 'id':'" + id + "'}", dataType: "json", contentType: "application/json; charset=utf-8", //async: false, success: function (data) { vex.dialog.open({ message: 'اطلاعات کاربر ' + data.d.FirstName + ' ' + data.d.LastName, input: "<style>\\n .vex-custom-field-wrapper {\\n margin: 1em 0;\\n }\\n .vex-custom-field-wrapper-inline-right {\\n margin: 1em 0;\\n \\n float: right;\\n \\n width: 48%;\\n }\\n .vex-custom-field-wrapper-inline-left {\\n margin: 1em 0;\\n \\n float: left;\\n \\n width: 48%;\\n }\\n .vex-custom-field-wrapper > label {\\n display: inline-block;\\n margin-bottom: .2em;\\n }\\n</style>" + "\\n<div class=\\"vex-custom-field-wrapper\\">\\n <label for=\\"EmailTxt\\">ایمیل</label>\\n <div class=\\"vex-custom-input-wrapper\\">\\n <input name=\\"EmailTxt\\" type=\\"email\\" value=\\"" + data.d.Email + "\\" disabled=\\"true\\" />\\n </div>\\n</div>\\n \\n<div class=\\"vex-custom-field-wrapper\\">\\n <label for=\\"UsernameTxt\\">نام کاربری</label>\\n <div class=\\"vex-custom-input-wrapper\\">\\n <input name=\\"UsernameTxt\\" type=\\"text\\" value=\\"" + data.d.UserName + "\\" disabled=\\"true\\" />\\n </div>\\n</div>\\n <div class=\\"vex-custom-field-wrapper-inline-right\\">\\n <label for=\\"FirstnameTxt\\">نام</label>\\n <div class=\\"vex-custom-input-wrapper\\">\\n <input id=\\"FirstnameTxt\\" name=\\"FirstnameTxt\\" type=\\"text\\" value=\\"" + data.d.FirstName + "\\" />\\n </div>\\n</div>\\n<div class=\\"vex-custom-field-wrapper-inline-left\\">\\n <label for=\\"LastnameTxt\\">نام خانوادگی</label>\\n <div class=\\"vex-custom-input-wrapper\\">\\n <input id=\\"LastnameTxt\\" name=\\"LastnameTxt\\" type=\\"text\\" value=\\"" + data.d.LastName + "\\" />\\n </div>\\n</div>" + "\\n<div class=\\"vex-custom-field-wrapper\\">\\n <label for=\\"NickNameTxt\\">نام مستعار</label>\\n <div class=\\"vex-custom-input-wrapper\\">\\n <input id=\\"NickNameTxt\\" name=\\"NickNameTxt\\" type=\\"text\\" value=\\"" + data.d.NickName + "\\" />\\n </div>\\n</div>\\n <div class=\\"vex-custom-field-wrapper\\">\\n <label for=\\"MobileTxt\\">شماره همراه</label>\\n <div class=\\"vex-custom-input-wrapper\\">\\n <input id=\\"MobileTxt\\" name=\\"MobileTxt\\" type=\\"text\\" value=\\"" + data.d.Mobile + "\\" />\\n </div>\\n</div>\\n <div class=\\"vex-custom-field-wrapper-inline-right\\">\\n <label for=\\"SexList\\">جنسیت</label>\\n <div class=\\"vex-custom-input-wrapper\\">\\n <select id=\\"SexList\\" name=\\"SexList\\" value=\\"" + data.d.Sex + "\\"> \\n<option value=\\"" + 0 + "\\">لطفا انتخاب نمایید</option> \\n<option value=\\"" + 1 + "\\">مرد</option> \\n<option value=\\"" + 2 + "\\">زن</option> </select> \\n </div>\\n</div>\\n \\n<div class=\\"vex-custom-field-wrapper-inline-left\\">\\n <label for=\\"BirthDateTxt\\">تاریخ تولد</label>\\n <div class=\\"vex-custom-input-wrapper\\">\\n <input id=\\"BirthDateTxt\\" name=\\"BirthDateTxt\\" type=\\"text\\" value=\\"" + data.d.Birthdate + "\\" />\\n </div>\\n</div>\\n", afterOpen: function() { jQuery('select option[value=\\"' + data.d.Sex + '\\"]').attr("selected", true); }, callback: function (value) { if (value) { alert('Profile id ' + id + ' Update Successed!'); updatePerson(id); } else { return false; } } }); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); } }); } 

updatePerson function is here:

 updatePerson = function (id) { jQuery.ajax({ type: "POST", url: "LastNewsProfileReport.aspx/UpdatePerson", data: { personId: '182', nickName: 'test', firstName:'test', lastName: 'test', mobileNo: '12345', sex: 'men', birthDate: 'test' }, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { alert('Success'); }, error: function (XMLHttpRequest, textStatus, errorThrown) { //alert(textStatus); } }); } 

the first $.ajax function is work correctly; but second $.ajax is 500 Internal Server Error

C# class code is here:

[WebMethod]
public static bool UpdatePerson(string personId, string nickName, string firstName, string lastName, string mobileNo, int sex, string birthDate)
{
    var lastNewsProfileReport = new LastNewsProfileReport();
    lastNewsProfileReport.Update(long.Parse(personId), nickName, firstName, lastName, mobileNo, sex, birthDate);
    return true;
}

Answer 1

In Update Person C# Method , there is no "id" parameter. For Ajax call to work, you have to pass on the exact parameter name.

    data: "{ 'id':'182'}", //in update person function javascript

Should be like -

    data: "{'personId': 'value', 'nickName' : 'value', 'firstName' : 'value', 'lastName' : 'value', 'mobileNo' : 'value', 'sex' : 'value', 'birthDate' : 'value'}"

For reference - check this post on Ajax and .NET

http://www.cheezycode.com/2015/08/create-html-table-using-jquery-ajax.html