ajax的相关介绍以及使用

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

它可以通过在后台与服务器先进行少量数据交换，使网页实现异步更新。这就代表可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

如果不使用ajax,进行Form的提交，当用户点击“Submit”按钮后，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果由于网络太慢或者其他原因，就会得到一个404页面。这也是Web进行运作的原理：一次HTTP请求对应一个页面。

如果想让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。这就使用到了Ajax技术。

下面以用户登录页面为例使用Ajax请求

<script>
	$(function(){
		//点击登录按钮
		$('#form').find('.form_group').on('click','.btn',function
{
var username = $('.username'.val();
var password = $('.password').val();
console.log($('.username').val());
console.log($('.password').val());
$.ajax({
type:'POST',
url:'/admin/login_data',
dataType:'json',
data:{
username:username,
password:password
},
sucess:function(res){
if (res.code ===-1){
console.log(res.msg);
alert(res.msg);
}else if (res.code === 1){
window.location.href = 'admin/index'
}
}
});
        
});
		});
$(document).ready(function(){
$("get_token").on('click',function(){
var account = $('#username').prop('value');
$.ajax({
'url':'http://yaqin.linkeddb.com/admin_send_token',
'data':{'account':account},
sucess:function(item){
if (item.status === 'ok'){
    alert(item.message + 'ok')
        }
else{
alert(item.message + 'no')
        }
    }
  })
})
})
</script>

ajax的相关介绍以及使用

猜你喜欢