JavaScript-There are multiple identical form in a page, respectively, to initiate the asynchronous request, then write the $.ajax method, the data is not sent out, the console also did not error?

Title:
A page has more than one form, write multiple $.ajax method, input ID is the same, respectively to initiate asynchronous request, write the $.ajax method, the data is not sent out, the console also did not error?

The Ajax method that the page loads first

function Ajax(obj){    $.ajax({       type:"post",        url:"ajax.asp",        data:"Nickname="+$('#inputUser').val(),        beforeSend:function(){            $('#yhm').append(process_request);        },        //用户名检测        success:function(res){            if(res>"0"){                $('#inputUser').attr('class','FrameDivWarn');                showInfo("yhm",msg_un_registered);                change_submit("true");//禁用提交按钮            }           if(res=="0"){               $('#inputUser').attr('class','FrameDivPass');               showInfo("yhm",msg_can_rg);               change_submit("false");//禁用提交按钮               $("#yhm").attr('class','ts-lg');           }        }    });};

Page post-load Ajax method

    //弹窗-异步function tc_Ajax(obj){    $.ajax({       type:"post",        url:"ajax.asp",        data:"Nickname="+$('#inputUser').val(),        beforeSend:function(){            $('#tc_yhm').append(process_request);        },        //用户名检测        success:function(res){            if(res>"0"){                $('#inputUser').attr('class','FrameDivWarn');                showInfo("tc_yhm",msg_un_registered);                change_submit("true");//禁用提交按钮            }           if(res=="0"){               $('#inputUser').attr('class','FrameDivPass');               showInfo("tc_yhm",msg_can_rg);               change_submit("false");//禁用提交按钮               $("#tc_yhm").attr('class','ts-lg');           }        }    });};

Description of the situation:
A page has two registrations, and one is available for asynchronous validation on the homepage. One is the point login pop-up window for asynchronous validation.
Usually this situation, the actual development is how to deal with, in what way to do more reasonable. (Can you integrate multiple identical validations into one Ajax method?) )

After loading the Ajax method, viewing HTTP, the data is not sent to the server side, what is the situation?

The first written Ajax method, the data can be successfully sent to the server side, and the return value is also right.

Question: Where did the conflict arise?

Reply content:

Title:
A page has more than one form, write multiple $.ajax method, input ID is the same, respectively to initiate asynchronous request, write the $.ajax method, the data is not sent out, the console also did not error?

The Ajax method that the page loads first

function Ajax(obj){    $.ajax({       type:"post",        url:"ajax.asp",        data:"Nickname="+$('#inputUser').val(),        beforeSend:function(){            $('#yhm').append(process_request);        },        //用户名检测        success:function(res){            if(res>"0"){                $('#inputUser').attr('class','FrameDivWarn');                showInfo("yhm",msg_un_registered);                change_submit("true");//禁用提交按钮            }           if(res=="0"){               $('#inputUser').attr('class','FrameDivPass');               showInfo("yhm",msg_can_rg);               change_submit("false");//禁用提交按钮               $("#yhm").attr('class','ts-lg');           }        }    });};

Page post-load Ajax method

    //弹窗-异步function tc_Ajax(obj){    $.ajax({       type:"post",        url:"ajax.asp",        data:"Nickname="+$('#inputUser').val(),        beforeSend:function(){            $('#tc_yhm').append(process_request);        },        //用户名检测        success:function(res){            if(res>"0"){                $('#inputUser').attr('class','FrameDivWarn');                showInfo("tc_yhm",msg_un_registered);                change_submit("true");//禁用提交按钮            }           if(res=="0"){               $('#inputUser').attr('class','FrameDivPass');               showInfo("tc_yhm",msg_can_rg);               change_submit("false");//禁用提交按钮               $("#tc_yhm").attr('class','ts-lg');           }        }    });};

Description of the situation:
A page has two registrations, and one is available for asynchronous validation on the homepage. One is the point login pop-up window for asynchronous validation.
Usually this situation, the actual development is how to deal with, in what way to do more reasonable. (Can you integrate multiple identical validations into one Ajax method?) )

After loading the Ajax method, viewing HTTP, the data is not sent to the server side, what is the situation?

The first written Ajax method, the data can be successfully sent to the server side, and the return value is also right.

Question: Where did the conflict arise?

The code of your two methods is basically the same, not the same place just to manipulate the DOM node.

So, you can pass the DOM node you want to manipulate as a parameter, so you can share the same method.

Two. What you have described is that your first AJAX-sent data is empty, indicating that your code is not assigned a value when it is executed, so it is empty.

And, you only describe the definition of your function and do not describe how you called it, at what point in time it was called.

is the input ID in each form the same? Does the same ID definitely clash?

ID cannot have two identical, according to your description you see if there are two identical IDs of input
What's more, you don't think it's a waste of code to write two functions that are exactly the same as the one above.

两个ID相同的元素并没有什么影响。题主描述的问题有错误的地方 "数据没有发送出去？"  这是指ajax请求没有发送数据，根据提问者的贴图明显是发送之前就没有取到数据并不是没有发送数据。"控制台没有报错？" 是前端控制台没有报错还是后台没有报错。前端还少一个error的回调方法，如果进了error那你这根本就没办法回调。

