Web- Jquery实现异步处理(Servlet)，局部刷新功能

做的JAVAEE 课设的学习笔记：声明：直接复制代码是运行不了的

(1)在Java中正确得到JSONObject，需要导入JSON的JAVA支持包“json-lib-2.3-jdk15.jar”，同时需导入 JSON依赖包“commons-logging-1.0.4.jar”，“commons-lang.jar”，“commons- collections.jar”，“commons-beanutils.jar”，“ezmorph-1.0.4.jar”；
--------------------- 
作者：大禾 
来源：CSDN 
原文：https://blog.csdn.net/luofeixiongsix/article/details/49837129 

版权声明：本文为博主原创文章，转载请附上博文链接！

一：引入<scriptsrc="js/jquery-2.1.4.min.js"></script>.js包

https://download.csdn.net/download/qq_32938957/10347500

 

二：<button οnclick="userdic()" >导入用户字典</button>写一个按钮提交事件(比form更加可拓展化--我的理解就是比form表单好用)

 

三：写js代码了：

//用户自定义导入词典
function userdic()
{

//数据传入准备
var mydata=document.getElementById("mytextview").value; //可以通过标签的id获取标签对象
var user=document.getElementById("userin").value;              //同上

var dic_data={"mydata":mydata,"userdata":user};                   //用于封装要创给Servlet的数据，就如form表单中的标签对象的数据(瞎BB)

 

var result=new Array(); //创建一个对象数组(用户后面的json数据处理，可跳过)

 

//ajax的核心部分！
$.ajax({
dataType:"json",                //返回类型为json数据的格式，(不懂json要上网查下，这个格式很常见)

async:false,                      

  //async. 默认是 true，即为异步方式，$.ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发$.ajax里的success方法，这时候执行的是两个线程。(在数据没返回时也能往下执行代码,如果你下面的代码需要放回的数据支持，那还是=false吧)

//async 设置为 false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

url:"AddUserDic",               //servlet的路径==form表单中的action=""的路径
data:dic_data, //创给servlet的数据  在servlet中用getParamenter(）获取
type:"post",                        //dopost()处理
success:function(data) //数据返回成功 返回数据(json)
{
//alert("返回成功");

 

 

 

                        //对对返回的json数据处理

//[{"word":"酒店"},{"word":"码头"},{"word":"孩子"},{"word":"觉得"},{"word":"六月"},{"word":"阳朔"},{"word":"提前"},{"word":"大人"},{"word":"拍照"},{"word":"桂林"}] 数据就是json数组里面放json对象

                        //data:就是返回上面的数据   

                        //i:循坏的下标吧  

                        //item:就是对jsonarray对应i下标的json对象{"word":"酒店"}

$.each(data,function(i,item)
{
var apartob=new Object();
apartob.word=item.word;    //json对象左边的键值 "word"
//apartob.sign=item.sign;
result.push(apartob);            //上面说的对象数组result
//alert(item.sign);

})

}
})

        

        //到这就结束了Ajax了下面的不用看了

 

        //获得要处理的div对象

var mid=document.getElementById("services_mid");
//每次添加时清除上一次的标签(删除被选元素下的说有子元素)
$("#services_mid").empty();


//创建标签
for(var i=0;i<result.length;i++)
{
if(result[i].word=="")
continue;

var createlabel=document.createElement("a");        //创建一个a标签
createlabel.className="cixing";                               //a标签的类名
createlabel.innerHTML=result[i].word+"/"+result[i].sign;    //内容
createlabel.setAttribute("style", "background-color:#3CFF14");    //设置a标签的属性
mid.appendChild(createlabel);                                //div中添加

}

}

 

Servlet对象：

一：导json处理的包  https://download.csdn.net/download/qq_32938957/10347493

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {


response.setContentType("text/html");

response.setCharacterEncoding("gbk");

                //获得传送过来的数据

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

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

 

JSONArray array=new JSONArray();

 

                //遍历list对象  获取数据

ArrayList<KeyWords> list=sp.getKeyWordList(50, false);
for(int i=0;i<list.size();i++)
{

KeyWords temp=list.get(i);

                        //！！！json数据处理

JSONObject json=new JSONObject();   // json对象
json.put("word", temp.getKeyword());   //json对象加数据
array.add(json);                                     //添加到json数组中
}



//写回前台！！！
PrintWriter pw=response.getWriter();
pw.print(array);        //结束

}

 

还有一种就是返回text数据 就是String类型被json简单 就不一一解释了

//情感分析   最大102400字节
function getSentiment(div_id)
{
card_div(div_id);
var mydata=document.getElementById("mytextview").value;
if(mydata.length>=51200)
{
alert("文本内容过长，无法进行情感分析");
return false;
}

var dic_data={"mydata":mydata};
var result=new Array(); //创建一个对象数组
var str_sentiment="1,0.5,0.5";

 

/*看这边就好*/

$.ajax({
dataType:"text",
async:false,
url:"GetSentiment",
data:dic_data, //字典类型
type:"post",
success:function(data) //数据返回成功 返回数据(json)
{

str_sentiment=data;

}
})


services_emotion_pie(str_sentiment);
}