1. 程式人生 > >extjs 使用Ext.Ajax.request進行資料傳輸

extjs 使用Ext.Ajax.request進行資料傳輸

java程式碼

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
PrintWriter out=response.getWriter();




System.out.println("i'am come here!");
String str=request.getParameter("id");
int id=Integer.parseInt(str);
readerBean bean=new readerBean();
String strline="";
for(int i=0;i<id;i++){
strline=str+strline;
}
bean.setName(strline);
bean.setNumber(strline);
bean.setPassword(strline);
bean.setMoney(strline);
bean.setRole(strline);
bean.setDepartment(strline);
bean.setSex(strline);
bean.setEmail(strline);
bean.setIdType(strline);
bean.setId(strline);
bean.setAddress(strline);
bean.setAge(strline);
bean.setTelephone(strline);
bean.setMobilephone(strline);
bean.setOther(strline);

JSONObject json=new JSONObject();
try {
json.put("name",bean.getName());
json.put("number",bean.getNumber());
json.put("password",bean.getPassword());
json.put("money",bean.getMoney());
json.put("role",bean.getRole());
json.put("department",bean.getDepartment());
json.put("sex",bean.getSex());
json.put("email",bean.getEmail());
json.put("idType",bean.getIdType());
json.put("id",bean.getId());
json.put("address",bean.getAddress());
json.put("age",bean.getAge());
json.put("telephone",bean.getTelephone());
json.put("mobilephone",bean.getMobilephone());
json.put("other",bean.getOther());
System.out.println(bean.name);
System.out.println(json);
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

out.print(json);


}

js程式碼

Ext.get(ID).on("click",function(){
Ext.Ajax.request({
method:'POST',
url:'../add',
dataType:'json',
params:{id:ID},//傳資料到後臺。
success:function(response){
var data=response.responseText;//這句話就已經得到了java後端傳過來的json資料了 

alert(data);//能夠輸出json資料、。但是得不到內部物件
var obj = eval( "(" + data + ")" );//這就話的功能就是讓我們可以得到json內部物件資料、

alert(data.name)//這裡面的data.name沒有定義

alert(obj.name)//只有obj.name才會有值
Ext.fly(ID).setStyle({
display:'none',
});
Ext.fly('detial'+ID).setStyle({
display:'block',
});
//-------------------------//
createDetialPanel(ID,obj);
//-------------------------//
Ext.getCmp('bodyPanelID').doLayout();
},
failure:function(){
alert('failure');
}
})

});




json 包之間的差異和jason物件的構建參考url:

http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/23/3096001.html,

json api url

http://hbe.hubs1.net/hjson/doc/content.htm

http://www.json.org/

使用jquery進行ajax同步載入程式碼例項

http://download.csdn.net/detail/mastershaw/9496774

jquery進行同步載入時,java部分都一樣

js部分不一樣

js程式碼:

function addMore(){
  $.ajax({ 
              type : "post",
              url : "add", 

async:true, 
              data:"",//傳資料到後臺。和Ext.Ajax.request中的params屬性一樣
              success : function(data){
                 var codes = jQuery.parseJSON(data);//這句話就已經得到js能夠使用的json資料了
                 $("#str").html(codes.str);
                    
              },
              failure: function(d,e){
              alert(e);
              }
            });
        }