• 用ajax来发送和接收json格式的数据


    ajax有三种方式来提交和接收json数据分别是$.post(),$.get(),$.ajax()默认三种都是异步操作,这三种操作都是jQuery这个框架封装的:

    异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随  意做其他事情,不会被卡死

    哪有异步操作就有同步操作

    同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待  卡死状态

    先来说第一种post提交的方式

    格式为$.post(

      url://访问服务器的url地址比如'${pageContext.request.contextpath}/ajaxWeb'

      data://写你的json数据比如'{"name":"张三","price":1888}'

      callback://回调函数function(data){//data为接收到的json数据}

      type://type为接收的数据为什么类型的类型比如json,text

    );

    贴一段代码看看具体的实例

    function postJson(){
    		$.post(
    			'${pageContext.request.contextPath}/ajaxWeb',
    			'{"name":"张三","price":122}',
    			function(data){
    				alert(data);
    			},
    			'json'
    		);
    	}
    

      

    下面介绍一下$.get()方式

    先说一下$.get方式的格式

    $.get(

      url://访问服务器的url地址

      data://写json的数据

      callback://书写回调函数

      type://接收的数据为什么格式

    );

    具体代码:

    $.get(
    				'${pageContext.request.contextPath}/ajaxWeb',
    				{"name":"z张三年","price":122},
    				function(data){
    					alert(data.name);
    				},
    				"json"
    			)
    

      

    第三种是$.ajax()这种方式

    先说一下格式

    $.ajax(

      type://指定为post还get提交

      url://提交到服务器的地址

      contentType://如果你以json格式提交数据就要写出contentType:"application/json"

      success:function(data){}//执行成功和返回的数据

      error:function(){}//请求失败的函数执行

      dataType:返回的数据类型可以是json也可以是text,如果前端页面报undefined那么应该你饭会的json数据类型不是标志的,孩子dataType写出了datatype

    );

    贴代码举例子:

    $.ajax({
    			type:'post',
    			url:'${pageContext.request.contextPath}/ajaxWeb',
    			data:{"name":"张三","price":123},
    			success:function(data){
    				alert(data.name);
    			},
    			error:function(){
    				alert("请求失败");
    			},
    			dataType:"json"//注意不是datatype哦
    		});
    

      

  • 相关阅读:
    Linux 安装oracle客户端
    测试杂感:Bug Bash
    常用Eclipse插件在线安装地址
    [转]Source Insight使用小技巧小结
    cygwin安装
    Jmeter常见问题
    对测试人员或开发人员来说相互沟通有多重要?
    QTP基础学习(二)启动与设置
    什么是基准测试?
    推荐几款热门的网站测试工具
  • 原文地址:https://www.cnblogs.com/tranquilityMan/p/11004844.html
Copyright © 2020-2023  润新知