1. ホーム
  2. ajax

AjaxにおけるbeforeSend関数の使用について

2022-02-20 04:10:02
<パス

AjaxのbeforeSend関数が使われている

ajaxでリクエストすると、小さな回転するローディングアイコンまたは"content loading..."がリターンの前に表示され、データがリクエストされていることがユーザーに通知されます。これは、beforeSendメソッドで行うことができます。

コードは次のとおりです。

$('#loginBtn').on('tap',function(){

		var This = $(this);
//Get the value filled in by the user on the page
		var data = {
			username:$.trim($('[name="username"]').val()),
			password:$.trim($('[name="password"]').val())
		}
// Determine that the user has entered a value
		if(!data.username){
			mui.toast('Please enter username');
			return;
		}
		if(!data.password){
			mui.toast('Please enter password');
			return;
		}
		$.ajax({
			url:'/user/login',
			type:'post',
			data:data,
			//no return will appear before a small rotating loading icon or "content loading..." is used to inform the user that data is being requested. This can be achieved with the beforeSend method
			beforeSend:function(){
				This.html('Logging in...') ;
			},
			success:function(result){
				if(result.success){
					this.html('Login successful');
					setTimeout(function(){
							location.href = "user.html";
					},2000)
				}else{
					this.html('login');
					//res.message The words inside are that the user does not exist
					mui.toast(result.message);
				}
			}
		})
	});