参考:
https://blog.csdn.net/qq_43551801/article/details/120050009
Ajax能让我们轻松实现网页与服务器之间的数据交互。
本文主要介绍使用jQuery封装后的Ajax,可以使用$.ajax()直接发起GET和POST服务器请求。
一. 使用
$.ajax()发起GET请求
1.例子1
// 入口函数
$(function () {
// 直接调用$.ajax()发起GET请求
$.ajax({
type: 'GET', // 指定请求方式(大小写均可)
url: 'http://XXX', // URL地址
data: { // 此次请求所携带的参数(GET请求可省略)
id: 1
success: function (res) { // 回调函数
console.log(res);
$.ajax()中的type属性值为请求方式 ("POST" 或 "GET"), 默认为 "GET"。
注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
发起GET请求时,data参数可以省略(不是必选项)。
最简单的情况下,$.ajax() 可以不带任何参数直接使用。
2.有时候GET请求也需要加上data参数
<form id="asset_form">
<div class="col-lg-2" style="width:150px;padding-left: 0px">
<label>
<select name="change_line" class="form-control m-b" onchange="change_info()">
<option value="all">所有平台</option>
{% for i in orgs_list %}
<option value="{{i.id}}"> {{ i.name }} </option>
{% endfor %}
</select>
</label>
</form>
function change_info(){
$.ajax({
type: "GET",
url: "http://127.0.0.1:8000/web/change_platform_ajax/",
data: $("#asset_form").serialize(),
success: function (data) {
$("#replace").html(data);
onchange事件就是标签内容发生变化时,会触发事件并调用相应的函数change_info()
views.py
def platform_search(request):
key_line = request.GET.get('change_line', '')
print(key_line)
if key_line == "all":
orgs_list=Org.objects.all()
elif key_line != "all":
orgs_list = Org.objects.filter(id=key_line)
# orgs_list=Org.objects.all()
return render(request, "web/show-buju-ajax.html", {"orgs_list": orgs_list})
urls.py
urlpatterns = [
path('show/', web_show, name="web_show"),
path('mychart/<int:org_id>', mychart),
path('change_platform_ajax/', platform_search)
页面选择平台——》触发onchange调用change_info函数——》向change_platform_ajax发送GET请求——》根据url调用view中的platform_search函数
这里就是页面上选择不同平台时, 就会触发onchange事件,调用change_info函数,向http://127.0.0.1:8000/web/change_platform_ajax/发送GET请求,并加上发送的data数据为select标签中change_line的值,如下图
并把请求页面返回的内容替换当前页面中id=replace的标签。
request.GET获取的就是请求网站中后面的查询参数change_line=1
二. 使用$.ajax()发起POST请求
// 入口函数
$(function () {
// 直接调用$.ajax()发起POST请求
$.ajax({
type: 'POST', // 请求方式
url: 'http://XXX', // 请求的URL地址
data: { // 此次请求需要提交的数据(需按api接口格式给定)
bookname: '呐喊',
author: '鲁迅',
publisher: '长江文艺出版社'
success: function (res) { // 回调函数
console.log(res);
使用$.ajax()需要发起POST请求时,type属性值必须为POST(大小写均可),将此次请求需要提交的数据按api接口规定格式写入data属性值中,以对象键值对形式存储。
努力生活,融于自然