ajax中json和文本的区别,ajax和json的知识点

AJAX

ajax主要作用：

传统的网页(即不用ajax技术网页),想要更新内容或者提交一个表单，都需要重新加载整个网页。

使用ajax技术网页，通过在后台服务器进行少量的数据交换，就可以实现异步更新。

使用ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的web用户界面。

ajax可以做：

登录

注册

JQuery Ajax 本质就是 XMLHttpRequest,对他进行包装，方便调用! 我们看下他的方法:

url:待载入页面的URL地址

data:待发送key/value参数。

sunccess:再入成功时回调函数。

dataType :返回内容格式。

$.ajax使用方法

常用参数：

+ url 请求地址

+ type 请求方式，默认是’GET’，常用的还有’POST’

+ dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’

+ data 设置发送给服务器的数据

+ success 设置请求成功后的回调函数

+ error 设置请求失败后的回调函数

+ async 设置是否异步，默认值是’true’，表示异步

ajax的三种写法

以前的写法：

$.ajax({

url: '/change_data',

type: 'GET',

dataType: 'json',

data:{'code':300268},

success:function(dat){

alert(dat.name);

},

error:function(){

alert('服务器超时，请重试！');

}

});

新的写法(推荐)：

$.ajax({

url: '/change_data',

type: 'GET',

dataType: 'json',

data:{'code':300268},

})

.done(function(dat) {

alert(dat.name);

})

.fail(function() {

alert('服务器超时，请重试！');

});

$.ajax的简写方式

$.ajax按照请求方式可以简写成$.get或者$.post方式,但是这种方法没有请求失败执行的回调函数

$.get("/change_data", {'code':300268},

function(dat){

alert(dat.name);

});

$.post("/change_data", {'code':300268},

function(dat){

alert(dat.name);

});

与ajax相关的概念：

同步和异步

现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。

局部刷新和无刷新

ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

数据接口

数据接口是后台程序提供的，它是一个url地址，访问这个地址，会对数据进行增、删、改、查的操作，最终会返回json格式的数据或者操作信息，格式也可以是text、xml等。

ajax错误处理

网络畅通，服务器返回的结果不是预期结果？ 答：可以判断服务器端返回的状态码，分别作出处理，ajax.status获取http状态码

低版本IE浏览器的缓存问题

+解决方案:在请求地址的后面加请求参数，保证每一次请求参数的值不相同。

url : ""get?t="+date.time

示例一 (注：此范例可用于登录页面)

package cn.xltq.controller;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletResponse;

import javax.xml.ws.Response;

import java.io.IOException;

@Controller

@RequestMapping("ajax")

public class AjaxController {

@RequestMapping("ol")

@ResponseBody

public void ajax(String name,HttpServletResponse response) throws IOException {

if("admin".equals(name)){

response.getWriter().print(true);

}else{

response.getWriter().print("error");

}

}

}

Created by IntelliJ IDEA.

User: 14553

Date: 2020/6/18

Time: 20:38

To change this template use File | Settings | File Templates.

--%>

Ajax

//将文本框的之发送给服务器，接收服务器返回的值

function ol() {

$.ajax({

url : "ajax/ol",

data : {"name": $("#txtName").val()},

success : function (response) {

console.log(response);

}

});

}

在此范例中发生了个小错误 Uncaught ReferenceError: $ is not defined 此错误产生的原因是未检查springmvc.xml配置/是否存在静态资源拦截()

范例二(注：此范例可用于下拉列表)

$Title$

$(function () {

$("#btn").click(function () {

$.post("ajax/o2",function (data) {

console.log(data);

var html = "";

for (var i=0;i

html += "

"+

"" + data[i].name + ""+

"" + data[i].age + ""+

"" + data[i].sex + ""+

""

}

$("#countent").html(html);

});

});

});

姓名

年龄

性别

@RequestMapping("o2")

@ResponseBody

public List ajax2(){

List list = new ArrayList();

User user1 = new User("大汉一号",1,"男");

User user2 = new User("大汉二号",1,"男");

User user3 = new User("大汉三号",1,"男");

User user4 = new User("大汉四号",1,"男");

list.add(user1);

list.add(user2);

list.add(user3);

list.add(user4);

return list;

}

示例三 (注：登录判断)

οnblur="" : 失去焦点产生时间

οnlοad="":"

JSON

@ResponseBody与 @RequestBody 区别

@RequestBody要写在方法的参数前，不能写在方法名上方，@ResponseBody要写在方法名上。

@RequestBody的作用是将前端传来的json格式的数据转为自己定义好的javabean对象

@ResponseBody的作用是将后端以return返回的javabean类型数据转为json类型数据。

@RequestMapping(value = “json”,produces = “application/json;charset=utf-8”) //指定响应体返回类型和编码

示例

@RequestMapping(value = "json",produces = "application/json;charset=utf-8")

@ResponseBody

public String json1() throws JsonProcessingException {

//需要一个jackson 的对象映射器，就是一个类，使用它的可以直接将对象转换为json字符串

ObjectMapper objectMapper = new ObjectMapper();

//创建一个对象

User user = new User("da",12,"男");

//将Java对象转换为json字符串

String s = objectMapper.writeValueAsString(user);

System.out.println(s);

return s;//由于使用了@ResponseBody注解，这里会s会以json格式字符串返回，十分方便。

}

json实现数组传递json 示例： @RequestMapping(value = "json3",produces = "application/json;charset=utf-8")

@ResponseBody

public String json3() throws JsonProcessingException {

Listlist = new ArrayList<>();

User user1 = new User("西凉铁骑",1,"男");

User user2= new User("西凉铁骑",1,"男");

User user3 = new User("西凉铁骑",1,"男");

User user4 = new User("西凉铁骑",1,"男");

User user5 = new User("西凉铁骑",1,"男");

list.add(user1);

list.add(user2);

list.add(user3);

list.add(user4);

list.add(user5);

return new ObjectMapper().writeValueAsString(list);

}

先前台发送时间信息 @RequestMapping(value = "date",produces = "application/json;charset=utf-8")

@ResponseBody

public String date() throws JsonProcessingException {

Date date = new Date();

//发现问题，时间默认返回json字符串变成了时间戳格式 1592707158453 Timestamp

return new ObjectMapper().writeValueAsString(date);

}

后发现问题，时间默认返回json字符串变成了时间戳格式 1592707158453 Timestamp @RequestMapping(value = "date1",produces = "application/json;charset=utf-8")

@ResponseBody

public String date1() throws JsonProcessingException {

ObjectMapper objectMapper = new ObjectMapper();

//如何让他不返回时间戳，所以我们要关闭此此功能

objectMapper.configure(SerializationFeature.WRITE_DATE_KEYS_AS_TIMESTAMPS,false);

//时间格式化问题

SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

//让objectMapper指定时间日期格式simpleDateFormat:

objectMapper.setDateFormat(simpleDateFormat);

Date date = new Date();

return objectMapper.writeValueAsString(date);

}

代码不断调用太过臃肿，该进如下：建立一个工具类：JSONUtils.java public static String getJson(Object object){

return getJson(object,"yyyy-MM-dd HH-mm-ss"); //经过大量看源代码总结出运用重载将此方法载入

}

public static String getJson(Object object,String deteFormat){

ObjectMapper objectMapper = new ObjectMapper();

//如何让他不返回时间戳，所以我们要关闭此此功能

objectMapper.configure(SerializationFeature.WRITE_DATE_KEYS_AS_TIMESTAMPS,false);

//时间格式化问题

SimpleDateFormat simpleDateFormat = new SimpleDateFormat(deteFormat);

//让objectMapper指定时间日期格式simpleDateFormat:

objectMapper.setDateFormat(simpleDateFormat);

try {

return objectMapper.writeValueAsString(object);

} catch (JsonProcessingException e) {

e.printStackTrace();

}

return "";

//使用工具类

@RequestMapping(value = "date3",produces = "application/json;charset=utf-8")

@ResponseBody

public String date3() throws JsonProcessingException {

Date date = new Date();

return JsonUtils.getJson(date);//由于使用了@ResponseBody注解，这里会s会以json格式字符串返回，十分方便。

}

输出结果为正常时间