$("#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}), // 传参,并序列化

【JavaScript】JS写法随笔(一) Ajax写法的更多相关文章

  1. Javascript模块化编程:模块的写法

    声明:本文转载自:阮一峰的网络日志,原文地址http://www.ruanyifeng.com/blog/2012/10/javascript_module.html,http://www.ruany ...

  2. JavaScript复杂判断的更优雅写法

    摘要: 写代码是一门艺术. 原文:JavaScript 复杂判断的更优雅写法 作者:Think. 公众号:大转转fe Fundebug经授权转载,版权归原作者所有. 前提 我们编写js代码时经常遇到复 ...

  3. javascript中面向对象的5种写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. [JS] 面向对象的5种写法和拓展JS对象的写法

    面向对象的JAVA  最开始当然是对象的定义了 收集了以下的五种写法 //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; C ...

  5. 【写法总结】$.ajax与$.post、$.get 写法区别

    原文: https://www.cnblogs.com/asdyzh/p/9807264.html   后台代码: [HttpPost] public string DoLogin(string us ...

  6. JavaScript 事件(捕获和冒泡 兼容性写法)

    事件    浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法 事件名:on ...

  7. js、jQuery、ajax面试题

    1.javascript的typeof返回哪些数据类型. 答案:string,boolean,number,undefined,function,object 2.例举3种强制类型转换和2种隐式类型转 ...

  8. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  9. 【转】关于URL编码/javascript/js url 编码/url的三个js编码函数

    来源:http://www.cnblogs.com/huzi007/p/4174519.html 关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),e ...

  10. 关于URL编码/javascript/js url 编码/url的三个js编码函数

    关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),encodeURI(),encodeURIComponent() 本文为您讲述关于js(javasc ...

随机推荐

  1. oracle数据库安装出现的问题

    根据相关安装教程,安装好oracle后,使用plsql连接时,不能成功连接时: 1.检查相关的环境变量等是否配置正确 2.认真看清楚 oracle客户端的相关配置 3.出现这个问题(我的是没有选择当前 ...

  2. 打印timescale信息

    verilog中用:$printtimescale($root.tb); systemverilog class中用: $printtimescale($sformatf("%m" ...

  3. 【笔记】小米路由器AX1800开启ipv6外部访问

    首先你的路由器要能获取ipv6地址 获取不到的光猫改桥接 路由器拨号 然后想办法开SSH ssh进路由器修改防火墙规则 ip6table的 建议先导出规则 ip6tables-save 在第120行插 ...

  4. JSP图书管理系统

    allbook.jsp pageEncoding="UTF-8"%> <%@ page import = "java.util.*" %> & ...

  5. ubuntu系统更换源和apt命令参数

    一:问题概述 ubuntu,我们在使用apt新装软件的时候,会使用官方的网站去下载软件,但是会因为国内的转接点太多,而导致下载的速度非常慢 ,我们可以通过换成一些中间的节点来进行下载,比如阿里源,中科 ...

  6. ubuntu usb network card drive

    通过 lsusb -t命令查看网卡型号 /: Bus 02.Port 1: Dev 1, class="root_hub", Driver=xhci_hcd/4p, 5000M | ...

  7. lua-携程

    function SayHey(mag) for i = 1 , 3 doprint(mag)coroutine.yield()end end --创建携程(协同) coFunc= coroutine ...

  8. MVP模式(转)

    什么是MVP模式?     这个MVP可不是腾讯游戏<王者荣耀>中的MVP.我们今天要讨论的MVP其实同MVC一样,是一种编程模式和思想,也许更准确地讲是一种架构. MVP和MVC的区别  ...

  9. Odoo编程,说明,功能,文章收藏贴

    CN Blog: https://www.cnblogs.com/Firstwing/p/14088500.html #http://blog.sina.com.cn/s/blog_bc7dee2d0 ...

  10. YieldReturn语法解析

    /* * * 学习Yield Return 语法 * 使用两个方法,显示1 - 100之间的全部偶数 * * */ using System;using System.Collections.Gene ...