web前端基础知识-Ajax
Posted Co丶cc
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端基础知识-Ajax相关的知识，希望对你有一定的参考价值。
Ajax即“Asynchronous Javascript And XML”（异步javascript和XML），是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）,AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
-----传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面；
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
Ajax工作原理：
1. 基本参数
$.ajax，这个是JQuery对ajax封装的最基础步骤，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。看一下常用的参数：
var configObj = {
method //数据的提交方式：get和post
url //数据的提交路径
async //是否支持异步刷新，默认是true
data //需要提交的数据
dataType //服务器返回数据的类型，例如xml,String,Json等
success //请求成功后的回调函数
error //请求失败后的回调函数
}
$.ajax(configObj);//通过$.ajax函数进行调用。
2. 实例分析
$.ajax({
url: \'/host\', // 数据提交地址
type: "POST", // 提交类型
data: {\'k1\': 123, \'k2\': "root"}, // 提交的内容 字典格式
success: function(data){ // 客户端会一直等待服务端返回的数值
// data是服务器端返回的字符串
var obj = JSON.parse(data);
}
})
建议：永远让服务器端返回一个字典
return HttpResponse(json.dumps(字典))
3. 简单的前后端交互
<div class="shade hide"></div> <div class="add-modal hide"> <form method="POST" action="/home/"> <div class="group"> <input id=\'host\' type="text" placeholder="主机名" name="hostname" /> </div> <div class="group"> <input id=\'ip\' type="text" placeholder="IP" name="ip" /> </div> <div class="group"> <input id=\'port\' type="text" placeholder="端口" name="port" /> </div> <div class="group"> <select id=\'sel\' name="b_id"> {% for op in b_list %} <option value="{{ op.id }}">{{ op.caption }}</option> {% endfor %} </select> </div> <input type="submit" value="提交" /> <a id="ajax_submit">要上天提交</a> <input id="cancel" type="button" value="取消" /> </form> </div>
Ajax代码：
$(function(){
$(\'#ajax_submit\').click(function () {
$.ajax({
url:"/test_ajax/",
type:"POST",
data:{\'hostname\':$(\'#host\').val(),\'ip\':$(\'#ip\').val(),\'port\':$(\'#port\').val(),\'b_id\':$(\'#sel\').val()},
success:function (data) {
if(data==\'OK\'){
location.reload() // 重新加载页面
}else {
alert(data);
}
}
})
})
})
Django代码：
def test_ajax(request):
print(request.method)
h = request.POST.get(\'hostname\')
i = request.POST.get(\'ip\')
p = request.POST.get(\'port\')
b = request.POST.get(\'b_id\')
print(h,i,p,b)
if h and len(h) > 5: # 主机名长度判断
models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b) # 创建数据
return HttpResponse("OK") # 返回OK 严格大小写
else:
return HttpResponse("主机名太短") # 返回错误提示
4. 对前后端交互完善（当后端有问题时，前端收不到data，页面无反应）
<div class="add-modal hide"> <form method="POST" action="/home/"> <div class="group"> <input id=\'host\' type="text" placeholder="主机名" name="hostname" /> </div> <div class="group"> <input id=\'ip\' type="text" placeholder="IP" name="ip" /> </div> <div class="group"> <input id=\'port\' type="text" placeholder="端口" name="port" /> </div> <div class="group"> <select id=\'sel\' name="b_id"> {% for op in b_list %} <option value="{{ op.id }}">{{ op.caption }}</option> {% endfor %} </select> </div> <input type="submit" value="提交" /> <a id="ajax_submit">要上天提交</a> <input id="cancel" type="button" value="取消" /> <span id="error_msg"></span> </form> </div>
Ajax代码：
$(function(){
$(\'#ajax_submit\').click(function () {
$.ajax({
url:"/test_ajax/",
type:"POST",
data:{\'hostname\':$(\'#host\').val(),\'ip\':$(\'#ip\').val(),\'port\':$(\'#port\').val(),\'b_id\':$(\'#sel\').val()},
success:function (data) {
console.log(data) // data {"data": null, "status": false, "error": "\\u4e3b\\u673a\\u540d\\u592a\\u77ed"}
var obj = JSON.parse(data); // 反序列化 把字符串data换成对象obj
// 序列化 JSON.stringify() 把obj转换为字符串
if(obj.status){
location.reload() // 重新加载页面
}else {
$(\'#error_msg\').text(obj.error)
}
}
})
})
})
Django代码：
import json
def test_ajax(request):
ret = {\'status\':True,\'error\':None,\'data\':None} # 返回一个字典
try:
h = request.POST.get(\'hostname\')
i = request.POST.get(\'ip\')
p = request.POST.get(\'port\')
b = request.POST.get(\'b_id\')
print(h,i,p,b)
if h and len(h) > 5: # 主机名长度
print("ok")
models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b)
else:
ret[\'status\'] = False
ret[\'error\'] = \'主机名太短\'
except Exception as e:
ret[\'status\'] = False
ret[\'error\'] = \'请求错误\'
return HttpResponse(json.dumps(ret)) # 对字典进行序列化
5. serialize自动获取表单数据
<form class="add-form" method="POST" action="/home/"> <div class="group"> <input id=\'host\' type="text" placeholder="主机名" name="hostname" /> </div> <div class="group"> <input id=\'ip\' type="text" placeholder="IP" name="ip" /> </div> <div class="group"> <input id=\'port\' type="text" placeholder="端口" name="port" /> </div> <div class="group"> <select id=\'sel\' name="b_id"> {% for op in b_list %} <option value="{{ op.id }}">{{ op.caption }}</option> {% endfor %} </select> </div> <input type="submit" value="提交" /> <a id="ajax_submit">要上天提交</a> <input id="cancel" type="button" value="取消" /> <span id="error_msg"></span> </form>
Ajax代码：
$.ajax({
url:"/test_ajax/",
type:"POST",
data:$(\'.add-form\').serialize(), // 获取表单数据提交 必须是form表单
success:function (data) {
})
6. Ajax代码补充（traditional，dataType）
Ajax代码：
$(function(){
$(\'#add_submit_ajax\').click(function(){
$.ajax({
url: \'/ajax_add_app\',
data: {\'user\': 123,\'host_list\': [1,2,3,4]},
// data: $(\'#add_form\').serialize(),
type: "POST",
dataType: \'JSON\', // 内部对传过来的数据直接执行JSON.parse 拿到的数据直接为对象而非字符串
traditional: true, // 添加此项 当字典里包含列表时候，后端可以getlist到里面的数据
success: function(obj){
console.log(obj);
},
error: function () { // 未知错误时执行，指前端收不到后台发送的obj时，执行
}
})
});
})
Django代码：
def ajax_add_app(request):
ret = {\'status\':True, \'error\':None, \'data\': None}
app_name = request.POST.get(\'app_name\')
host_list = request.POST.getlist(\'host_list\')
obj = models.Application.objects.create(name=app_name)
obj.r.add(*host_list)
return HttpResponse(json.dumps(ret))
以上是关于web前端基础知识-Ajax的主要内容，如果未能解决你的问题，请参考以下文章