Jquery AJax
1. 介绍¶
AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。
下面的表格列出了所有的 jQuery AJAX 方法：
| 方法 | 描述 |
|---|---|
| $.ajax() | 执行异步 AJAX 请求 |
| $.ajaxPrefilter() | 在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项 |
| $.ajaxSetup() | 为将来的 AJAX 请求设置默认值 |
| $.ajaxTransport() | 创建处理 Ajax 数据实际传送的对象 |
| $.get() | 使用 AJAX 的 HTTP GET 请求从服务器加载数据 |
| $.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码的数据 |
| $.getScript() | 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript |
| $.param() | 创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串） |
| $.post() | 使用 AJAX 的 HTTP POST 请求从服务器加载数据 |
| ajaxComplete() | 规定 AJAX 请求完成时运行的函数 |
| ajaxError() | 规定 AJAX 请求失败时运行的函数 |
| ajaxSend() | 规定 AJAX 请求发送之前运行的函数 |
| ajaxStart() | 规定第一个 AJAX 请求开始时运行的函数 |
| ajaxStop() | 规定所有的 AJAX 请求完成时运行的函数 |
| ajaxSuccess() | 规定 AJAX 请求成功完成时运行的函数 |
| load() | 从服务器加载数据，并把返回的数据放置到指定的元素中 |
| serialize() | 编码表单元素集为字符串以便提交 |
| serializeArray() | 编码表单元素集为 names 和 values 的数组 |
2. ajax get¶
get()方法是通过HTTP GET请求载入信息。这是一个简单的GET 请求能以取代复杂的$.ajax,请求成功时可调用回调函数。
$.ajax({
url:url,
data:data,
success:success,
dataType: dataType
});
data.json文件和html文件在一个文件夹内，否则要修改请求的url地址
data.json
[
{
"id":"1",
"name":"张三",
"age":10
},
{
"id":"2",
"name":"李四",
"age":10
},
{
"id":"3",
"name":"王五",
"age":10
},
{
"id":"4",
"name":"赵六",
"age":10
}
]
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/select_cmz.js"></script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button>点击</button>
</body>
<script>
$(function () {
$('button').click(function () {
$.get("data.json",function (data) {
// console.log(data)
for (var i = 0;i<data.length;i++) {
$('tbody').append(
"<tr>"+
"<td>"+data[i].id+"</td>"+
"<td>"+data[i].name+"</td>"+
"<td>"+data[i].age+"</td>"+
"</tr>"
)
}
})
})
})
</script>
</html>
get 请求可以省略，type字段
注意: 先使用console.log 控制台打印是否有数据，有的话在调用数据
3. ajax post¶
post()方法是通过HTTP POST请求从服务器载入数据。
$.ajax({
type:'POST',
url:url,
data:data,
success:success,
dataType: dataType
});
| 参数 | 描述 |
|---|---|
| url | 必须，规定把请求发送到哪个url |
| data | 可选，映射或字符串值，规定连同请求发送到服务器数据 |
| success(data,textStatus,jqXHR) | 可选，请求成功时执行的回调函数 |
| dataType | 可选，规定预期的服务器响应的数据类型，默认执行执行判断，(xml,json,script or html) |
ajax的post请求。我用了一个简单的django的demo作为后端。
django代码
------------- url.py -------------
path('test/', views.test),
------------- views.py -------------
def test(request):
if request.method == "POST":
print("start ----- test")
name = request.POST.get('name')
age = request.POST.get('age')
print('my name is {name},and my age is {age}'.format(name=name, age=age))
return HttpResponse(JsonResponse({"name":name, "age":age}))
return render(request, "test.html")
前段代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
姓名: <input type="text" id="name"> <br>
年龄: <input type="text" id="age"><br>
<button>点击</button>
<p></p>
</body>
<script>
$(function () {
$('button').click(function () {
var name = $('#name').val();
var age = $('#age').val();
$.ajax({
url:'/test/',
type:'POST',
data:{'name':name,'age':age},
success:function (data) {
console.log(data)
$('p').text("您输入的数据是姓名: "+JSON.parse(data)["name"]+" ,年龄是"+JSON.parse(data)["age"])
}
})
})
})
</script>
</html>
简述
1. 后端django 启动一个url /test。收到前端数据，然后数据序列化发送返回json 2. 前端收到后端数据，反序列化。 也就是前端在input框输入数据发送给后台，后台在返回给前端，前端拿到数据后在按钮下面插入p标签