Detailed example of Ajax form submission (with code)

This time I will bring you a detailed example of Ajax submission of form form (with code), what are the precautions for Ajax submission of form form, the following is a practical case, let's take a look.

ajax (ajax development)

AJAX is "Asynchronous Javascript And XML" (asynchronous JavaScript and XML), Refers to a web development technology for creating interactive web applications.

AJAX = Asynchronous JavaScript and XML (a subset of Standard Universal Markup Language).

AJAX is a technology for creating fast, dynamic web pages.

By exchanging a small amount of data with the server in the background, AJAX can enable asynchronous updates of web pages. This means that parts of a web page can be updated without reloading the entire page.

I have been learning code for a long time, but I rarely use ajax. Later, I went to find out more about it. The following is my opinion and understanding of ajax as a newcomer who is new to ajax.

Ajax, asynchronous request, by exchanging a small amount of data with the server in the background, AJAX can make the web page update asynchronously. This means that parts of a web page can be updated without reloading the entire page.

Recently I tested the ajax form submission. There are two types of form submission: post and get. The post method is more used. Although compared with POST, GET is simpler and faster, and in most cases It works.

However, in the following situations, using POST requests is more efficient:

1. Cache files cannot be used (updating files or databases on the server)

2 .Send large amounts of data to the server (POST has no data volume limit)

3. When sending user input containing unknown characters, POST is more stable and reliable than GET

$get method submits the form

get() method loads information through remote HTTP GET request

Format

$(selector).get(url,data,success(response,status,xhr),dataType)

For example:

Request the demo.php web page, send 2 parameters, ignore the return value:

$.get("demo.php", { name: "John", time: "2pm" } );

demo.php is the URL address to send the request

{ name: “John”, time: “2pm” } The data to be sent to the server.

$POST method to submit the form

$.post

jQuery.post( url, [data], [callback], [type] ): Use POST method to perform Asynchronous request

Parameters:

url (String): URL address to send the request.

data (Map): (Optional) Data to be sent to the server, in Key/value representation in the form of key-value pairs.

callback (Function): (optional) Callback function when loading is successful (this method is called only when the return status of Response is success).

For example, when registering, the use of verification code

<script type="text/javascript">
function redirect(url) {
location.href = url;
}
$("#code_btn").click(function(){
var tel = $("#username").val();
if(tel == ""){
alert("请输入正确的手机号码作为账号进行注册");
$("#username").focus();
return false;
}
if(!(/^1[3|4|5|8|7][0-9]\d{4,8}$/.test(tel))){
alert("请使用正确的手机号码作为账号进行注册！");
$("#username").focus();
return false;
};
var codeNum = $("#code").val();
$.post( '{APP_PATH}index.php?m=member&c=index&a=public_send_message', {tel:tel,codeNum:codeNum}, function(result){
// console.log(result);
})
timep(60);
});
function timep(j){
$("#code_btn").attr('disabled',"true");
$("#code_btn").val(j+"秒");
time=setInterval(function(){
j=j-1;
$("#code_btn").val(j+"秒");
if(j==0){
$("#code_btn").removeAttr('disabled');
clearInterval(time);
j=60;
$("#code_btn").val("点击获取验证码");
}
},1000);
}
</script>

APP_PATH}index.php?m=member&c=index&a=public_send_message is the URL address to send the request

{tel:tel,codeNum:codeNum} is the data to be sent to the server, expressed in the form of Key/value pairs.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Ajax obtains API data for national weather forecast

Ajax and JSON data interactive storage

The above is the detailed content of Detailed example of Ajax form submission (with code). For more information, please follow other related articles on the PHP Chinese website!