【JavaScript】JS写法随笔(一) Ajax写法
$("#btn").click(function () { var wanted_code = $("#wanted_code").children('option:selected').val(); var wanted_man_name = $("#wanted_man_name").val(); $.ajax({ url: '/create_wanted', type: 'POST', // 调用post方法类型 dataType: 'JSON', contentType: 'application/json,charset=utf-8', //设置请求头,入参为JSON格式 data: JSON.stringify({'wanted_code': wanted_code, 'wanted_man_name': wanted_man_name}), // 传参,并序列化 async: false, // false-异步 beforeSend: function () { // $("#show").html('通缉中...'); $("#loading").attr({"hidden": false}); }, // beforeSend 调用前页面展示内容 success: function (result) { $("#show").html('流水号:' + result + ',通缉完成'); $("#loading").attr({"hidden": true}); } // success 异步调用成功后在页面填充内容 }); $.ajax({ url: '/pic_generator', type: 'POST', data: {'code': waybill_no}, async: false, success: function (result) { $("#pic").attr("src", result); } }) });
Tips:
1.可以此方法写入.js,放入static下,html内部引用此脚本。
<script type="text/javascript" src="../static/js/create_wanted.js"></script>
2.同时可以在<head>中引入jQuery。
<script type="text/javascript" src="../static/js/jquery-3.6.0.min.js"></script>
3.特别注意:jq-ajax发送post请求时对于一个JSON obj,需要先序列化JSON.stringify(),然后设置contentType:'application/json,charset=utf-8'来发送JSON格式的报文给后端。
dataType: 'JSON', contentType: 'application/json,charset=utf-8', //设置请求头,入参为JSON格式 data: JSON.stringify({'wanted_code': wanted_code, 'wanted_man_name': wanted_man_name}), // 传参,并序列化