利用ajax实现前后端数据交互

xiaoxiao2025-05-16  28

ajax代码段:

$(function () { {#TODO:显示选中省份#} $('#se_province').change(function () { var province = $('#se_province').val() var urlString1 = 'http://127.0.0.1:8000/find_medium_exam' var urlString2 = 'http://127.0.0.1:8000/find_high_exam' $.ajax({ url: urlString1, // 请求类型是POST还是GET type: 'GET', // 异步还是同步 默认是异步,false表示同步 async: true, // 发送数据 data: { 'province': province, }, // 超时时间 timeout: 5000, // 返回数据类型json数据 dataType: 'json', // 成功返回处理 success: function (data, textStatus, jqXHR) { //解析json数据 console.log(data); console.log(textStatus); console.log(jqXHR); // 模拟服务器返回成功 showMedium(data) }, // 错误返回 error: function (xhr, textStatus) { console.log('错误'); console.log(xhr); console.log(textStatus); } }); $.ajax({ url: urlString2, // 请求类型是POST还是GET type: 'GET', // 异步还是同步 默认是异步,false表示同步 async: true, // 发送数据 data: { 'province': province, }, // 超时时间 timeout: 5000, // 返回数据类型json数据 dataType: 'json', // 成功返回处理 success: function (data, textStatus, jqXHR) { //解析json数据 console.log(data); console.log(textStatus); console.log(jqXHR); // 模拟服务器返回成功 showHigh(data) }, // 错误返回 error: function (xhr, textStatus) { console.log('错误'); console.log(xhr); console.log(textStatus); } }); }) {#TODO:显示中招信息#} function showMedium(data) { var items =$('#tag1>section>dl').remove() var div = $('#tag1>section') for (let i = 0; i < data.length; i++) { var dl = $('<dl></dl>').addClass('class="w-all bd-td-d1d1d1 m-t-0 fl') for (var j = 0; j < 4; j++) { var dd = $('<dd></dd>').addClass('m-l-20 fs-14 line-h60 text-c ftc-646464 fl') switch (j) { case 0:{ dd.addClass('w-170') dd.html(data[i]['province__p_name']) break; } case 1:{ dd.addClass('w-170') dd.html(data[i]['date']) break; } case 2:{ dd.addClass('w-170') dd.html(data[i]['time_interval']) break; } case 3:{ dd.addClass('w-420') dd.html(data[i]['course']) break; } } dl.append(dd) } div.append(dl) } } {#TODO:显示高招日历#} function showHigh(data){ $('#tag2>section>dl').remove() var div = $('#tag2>section') for (let i = 0; i < data.length; i++) { var dl = $('<dl></dl>').addClass('w-all bd-td-d1d1d1 m-t-0 fl') for (let j = 0; j < 4; j++) { var dd = $('<dd></dd>') switch (j) { case 0:{ dd.addClass('w-170 m-l-20 fs-14 line-h60 text-c ftc-646464 fl') dd.html(data[i]['province__p_name']) break; } case 1:{ dd.addClass('w-170 m-l-20 fs-14 line-h60 text-c ftc-646464 fl') dd.html(data[i]['date']) break; } case 2:{ dd.addClass('w-170 m-l-20 fs-14 line-h60 text-c ftc-646464 fl') dd.html(data[i]['time_interval']) break; } case 3:{ dd.addClass('w-420 m-l-20 fs-14 line-h60 text-c ftc-646464 fl') dd.html(data[i]['course']) break; } } dl.append(dd) } div.append(dl) } } })
转载请注明原文地址: https://www.6miu.com/read-5030199.html

最新回复(0)