JSP页面Ajax发送请求与乱码解决

JSP页面内容（前台代码）：

 

<!-- 定义error样式 -->

<style type="text/css">

.error {

color: red;

font-size: 14px;

}

.normal{

color:green;

font-size:14px

}

</style>

 

<script type="text/javascript">

 

function matchBookname() {

var bookname = $('#textbookname').val().trim();//去除首尾空格

if (bookname.length == 0) {//书名为空

$('#labelbookname').html('请输入模糊搜索的书名');

$('#labelbookname').removeClass();

$('#labelbookname').addClass('error');

return false;

} else {

var params = "bookname=" + bookname;//URL携带参数，即匹配条件

$.ajax({

'url' : 'AjaxMatchByBookname.htm',

'type' : 'post',

'data' : encodeURI(encodeURI(params)),//编码

'dataType' : 'json',

'success' : callbackFunc,//自定义函数

'error' : function(XMLHttpRequest, textStatus, errorThrown) {

                alert("内部错误，请重新操作！");

return false;

}

});

return true;

}

}

 

function callbackFunc(data) {

if (data!="") {//Ajax返回的数据不为空

$('#labelbookname').html('检测到书名，请继续');//提示信息

$('#labelbookname').removeClass();//清楚原有的样式

$('#labelbookname').addClass('normal');//添加normal样式

var t = eval(data);//eval()解析返回的json字符串data

$('#bookname').empty();//清空bookname元素中内容

var bookArr = document.getElementById('bookname'); //

 

for(var i=0;i<t.length;i++){

var op = document.createElement("OPTION"); 

        op.value = data[i].id;  

        op.innerHTML =data[i].bookname;

        bookArr.appendChild(op);

}

document.getElementById("submitid").disabled=undefined;//程序走到这里使提交按钮可用

return true;

} else {

$('#labelbookname').html('书名不匹配，请重新输入！');

$('#labelbookname').removeClass();

$('#labelbookname').addClass('error');

$('#bookname').empty();//

document.getElementById("submitid").disabled="disabled";

return false;

}

}

 

</script>

 

 

AjaxAction内容（后台代码）：

 

import java.io.IOException;

import java.io.PrintWriter;

import java.net.URLDecoder;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.http.HttpServletResponse;

import com.opensymphony.webwork.ServletActionContext;

 

import org.test.framework.BaseAction;

import org.test.pojo.Book;

import org.test.service.BookService;

import org.test.util.JsonUtil;

 

public class AjaxMatchByBooknameAction extends BaseAction {

private BookService bookService;

private String bookname;

// private List<Book> bookInfoList;

public void matchByBookname() throws IOException {

HttpServletResponse response = ServletActionContext.getResponse();

HttpServletRequest request = ServletActionContext.getRequest();

 

response.setContentType("text/html;charset=utf-8");//解决乱码问题

response.setCharacterEncoding("utf-8");

PrintWriter out = response.getWriter();

// JSONArray array = new JSONArray();

List<Book> bookInfoList = new ArrayList<Book>();

bookname = URLDecoder.decode(URLDecoder.decode(bookname, "UTF-8"), "UTF-8");//解决汉字乱码

 

try {

bookInfoList = bookService.matchBook(bookname);

} catch (Exception e) {

e.printStackTrace();

}

 

//if (!bookInfoList.isEmpty()) { array.add("suc"); } else {

//array.add("fail"); }

// out.append(array.toString());

out.append(JsonUtil.getJsonString(bookInfoList));//将数据打印到缓冲区

out.flush();

out.close();

}

 

public BookService getBookService() {

return bookService;

}

 

public void setBookService(BookService bookService) {

this.bookService = bookService;

}

 

public String getBookname() {

return bookname;

}

 

public void setBookname(String bookname) {

this.bookname = bookname;

}

}