$("#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. 
						
  2. JavaScript复杂判断的更优雅写法
		
    摘要: 写代码是一门艺术. 原文:JavaScript 复杂判断的更优雅写法 作者:Think. 公众号:大转转fe Fundebug经授权转载,版权归原作者所有. 前提 我们编写js代码时经常遇到复 ...
    
		
    3. 
						
  3. javascript中面向对象的5种写法
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    4. 
						
  4. [JS] 面向对象的5种写法和拓展JS对象的写法
		
    面向对象的JAVA  最开始当然是对象的定义了 收集了以下的五种写法 //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; C ...
    
		
    5. 
						
  5. 【写法总结】$.ajax与$.post、$.get  写法区别
		
    原文: https://www.cnblogs.com/asdyzh/p/9807264.html   后台代码: [HttpPost] public string DoLogin(string us ...
    
		
    6. 
						
  6. JavaScript   事件(捕获和冒泡 兼容性写法)
		
    事件    浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法 事件名:on ...
    
		
    7. 
						
  7. js、jQuery、ajax面试题
		
    1.javascript的typeof返回哪些数据类型. 答案:string,boolean,number,undefined,function,object 2.例举3种强制类型转换和2种隐式类型转 ...
    
		
    8. 
						
  8. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
		
    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
    
		
    9. 
						
  9. 【转】关于URL编码/javascript/js url 编码/url的三个js编码函数
		
    来源:http://www.cnblogs.com/huzi007/p/4174519.html 关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),e ...
    
		
    10. 
						
  10. 关于URL编码/javascript/js url 编码/url的三个js编码函数
		
    关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),encodeURI(),encodeURIComponent() 本文为您讲述关于js(javasc ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. Cesium开发三维地图入门
			
    需求:要求将GLTF三维模型放到地图上展示,并且添加各种图标和线进行标注. 用CesiumJS地图库实现代码如下: 引入CesiumJS库 1.直接clone源码包,在index.html中引入,如下 ...
    
			
    2. 
						
  2. Typora以及Markdown学习
			
    Typora以及Markdown学习 标题 n级标题 一级标题为#+[空格]+标题或者ctrl+1 二级标题则为``##+[空格]+标题`或者ctrl+2 后续几级标题依此类推... 最多支持6级标题 ...
    
			
    3. 
						
  3. DSL语言思想的应用
			
    背景 DSL语言的认知 DSL思想的应用 DSL的拓展思考 目标 业务限定 简化逻辑 提高效率 实现 业务提取 业务共性抽离 语法生成 语法实施
    
			
    4. 
						
  4. Centos 性能监控技巧
			
    1.top监控系统进程 top 命令查看进程时可自定义刷新频率,比较直观 用法 用法:Usage: top -hv | -bcHiOSs -d secs -n max -u|U user -p pid ...
    
			
    5. 
						
  5. EBS的配置文件
			
    默认账套 select fnd_profile.value('GL_SET_OF_BKS_ID') FROM DUAL; >> 2026 这样就能通过2026去获取一些账套上的配置 比如c ...
    
			
    6. 
						
  6. Prettier 与 ESLint 对函数名后空格的处理
			
    问题 Prettier 格式化 JavaScript 代码之后,默认不会在函数与 () 添加空格,而 ESLint 默认情况下则要求函数与 () 之间必须有一个空格. 保留空格的方案配置 方案 1 在 ...
    
			
    7. 
						
  7. PyTables 教程（一）入门，浏览对象树，将数据提交到表和数组
			
    翻译自http://www.pytables.org/usersguide/tutorials.html 教程 Seràs la clau que obre tots els panys, seràs ...
    
			
    8. 
						
  8. 手把手XTTS_V4迁移
			
    最近公司Oracle升级,考虑到停机时间等综合因数,最终选择了xtts数据迁移方案. 为此我整理了一份操作手册,方便以后查阅. 关于xtts的介绍可以参见这篇文章: <XTTS,又一个值得你重视 ...
    
			
    9. 
						
  9. C# List 分页代码
			
    List<int> testList = new List<int>();for (int i = 1; i <= 23; i++){ testList.Add(i);} ...
    
			
    10. 
						
  10. java基于ssm框架开发的公交查询系统源码公交系统源码公交路线查询项目有论文
			
    简介 java基于ssm的公交路线查询系统,用户可以查询公交站点公交车路线以及公交换乘方案,还可以查看公交车路线地图,以及该站点所有的公交车路线. 演示视频: https://www.ixigua.c ...
    
			
    11.