可查看基于ajax的前后端多种数据交互：

js 发送text & 接收 text

js部分

var xmlhttp;

function callback() {

if (xmlhttp.readyState==4){// 4 = "loaded"

if (xmlhttp.status==200){// 200 = OK

alert("成功了 = " + xmlhttp.responseText);

}else{

alert("error");

}

}

}

//POST方式

function test(){

xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange=callback;

xmlhttp.open("POST","test.do",true);

// 设置POST请求的请求头 POST需添加这项 GET可不需要.

xmlhttp.setRequestHeader("Content-Type"

, "application/x-www-form-urlencoded");

xmlhttp.send('password=123&username=mingzi');

}

//GET方式

function test(){

xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange=callback;

xmlhttp.open("GET","test.do?password=123&username=mingzi",true);

// 设置POST请求的请求头 POST需添加这项 GET可不需要.

//xmlhttp.setRequestHeader("Content-Type"

//, "application/x-www-form-urlencoded");

xmlhttp.send('password=123&username=mingzi');

}

java部分

@RequestMapping(value="/test.do",produces="text/html;charset=UTF-8;")

@ResponseBody

public String test(HttpServletRequest request){

String username=request.getParameter("username");

String password=request.getParameter("password");

String url=request.getRequestURI();

String path=request.getServletPath();

String method =request.getMethod();

System.out.println("\n url is:"+url);

System.out.println("\n path is:"+path);

System.out.println("\n method is:"+method);

System.out.println("\n username is:"+username);

System.out.println("\n password is:"+password);

return "这是后台中文字符";

}

后台输出

url is:/test.do

path is:/test.do

method is:GET

username is:mingzi

password is:123

js 发送text 接收json

js部分

var xmlhttp;

function callback() {

if (xmlhttp.readyState==4){// 4 = "loaded"

if (xmlhttp.status==200){// 200 = OK

var data = xmlhttp.responseText;

var jsonobj = eval('(' + data + ')');

var strTemp = eval('jsonobj.one');

console.log("\n data = " + data);

console.log("\n jsonobj = " + jsonobj);

alert(strTemp);

}else{

alert("error");

}

}

}

function test(){

xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange=callback;

xmlhttp.open("POST","test.do",true);

// // 设置POST请求的请求头

xmlhttp.setRequestHeader("Content-Type"

, "application/json");

xmlhttp.send('password=123&username=mingzi');

}

java部分

@RequestMapping(value="/test.do")

@ResponseBody

public JSONObject test(HttpServletRequest request){

String username=request.getParameter("username");

String password=request.getParameter("password");

String url=request.getRequestURI();

String path=request.getServletPath();

String method =request.getMethod();

System.out.println("\n url is:"+url);

System.out.println("\n path is:"+path);

System.out.println("\n method is:"+method);

System.out.println("\n username is:"+username);

System.out.println("\n password is:"+password);

JSONObject obj = new JSONObject();

obj.put("one","一个");

obj.put("two","两个");

System.out.println("\n obj is:"+obj);

return obj;

}

特别注意 java想要返回给前端json数据必须引入一下两个包 (否则会出现406错误)

@ResponseBody返回json格式的数据，而浏览器接受的是text/html;charset=UTF-8文本类型

解决方法：添加json所需要的依赖

org.codehaus.jackson

jackson-core-asl

org.codehaus.jackson

jackson-mapper-lgpl

1.9.12

关于mediaTypes配置和"accept" headers

前端 ACCEPT 类型如下

*.3gppaudio/3gpp, video/3gpp3GPP Audio/Video

*.ac3audio/ac3AC3 Audio

*.asfallpication/vnd.ms-asfAdvanced Streaming Format

*.auaudio/basicAU Audio

*.csstext/cssCascading Style Sheets

*.csvtext/csvComma Separated Values

*.docapplication/mswordMS Word Document

*.dotapplication/mswordMS Word Template

*.dtdapplication/xml-dtdDocument Type Definition

*.dwgimage/vnd.dwgAutoCAD Drawing Database

*.dxfimage/vnd.dxfAutoCAD Drawing Interchange Format

*.gifimage/gifGraphic Interchange Format

*.htmtext/htmlHyperText Markup Language

*.htmltext/htmlHyperText Markup Language

*.jp2image/jp2JPEG-2000

*.jpeimage/jpegJPEG

*.jpegimage/jpegJPEG

*.jpgimage/jpegJPEG

*.jstext/javascript, application/javascriptJavaScript

*.jsonapplication/jsonJavaScript Object Notation

*.mp2audio/mpeg, video/mpegMPEG Audio/Video Stream, Layer II

*.mp3audio/mpegMPEG Audio Stream, Layer III

*.mp4audio/mp4, video/mp4MPEG-4 Audio/Video

*.mpegvideo/mpegMPEG Video Stream, Layer II

*.mpgvideo/mpegMPEG Video Stream, Layer II

*.mppapplication/vnd.ms-projectMS Project Project

*.oggapplication/ogg, audio/oggOgg Vorbis

*.pdfapplication/pdfPortable Document Format

*.pngimage/pngPortable Network Graphics

*.potapplication/vnd.ms-powerpointMS PowerPoint Template

*.ppsapplication/vnd.ms-powerpointMS PowerPoint Slideshow

*.pptapplication/vnd.ms-powerpointMS PowerPoint Presentation

*.rtfapplication/rtf, text/rtfRich Text Format

*.svfimage/vnd.svfSimple Vector Format

*.tifimage/tiffTagged Image Format File

*.tiffimage/tiffTagged Image Format File

*.txttext/plainPlain Text

*.wdbapplication/vnd.ms-worksMS Works Database

*.wpsapplication/vnd.ms-worksWorks Text Document

*.xhtmlapplication/xhtml+xmlExtensible HyperText Markup Language

*.xlcapplication/vnd.ms-excelMS Excel Chart

*.xlmapplication/vnd.ms-excelMS Excel Macro

*.xlsapplication/vnd.ms-excelMS Excel Spreadsheet

*.xltapplication/vnd.ms-excelMS Excel Template

*.xlwapplication/vnd.ms-excelMS Excel Workspace

*.xmltext/xml, application/xmlExtensible Markup Language

*.zipaplication/zipCompressed Archive