JsonフォーマットデータのWebフロントエンドページへの応用
オブジェクト内のデータをjsonデータにフォーマットする方法と、jsonフォーマットの文字列をオブジェクトに変換する方法について説明しました.次に、jsonデータをクライアントに送信し、クライアントで使用する方法について説明します.
まず、jsonデータをクライアントに送信します.
フィルタ:
データがクライアントに転送されると、簡単にデータを取り出すことができます.
まずあなたのページにjqueryを導入します.min.js
コードは次のとおりです.
ここでは簡単に取り出して見るだけですが、jsonデータを処理できるjsコンポーネントを使用すると、あなたのコンポーネントにデータが伝わります.データをポップアップできない場合は、msgをeval(msg)の下で処理します.
取り出したデータは、ページのテキストボックスに値を付けたり、jsコードで使用したりすることができます.
まず、jsonデータをクライアントに送信します.
package test;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
import org.apache.log4j.Logger;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;
public class Tes3 extends DispatchAction {
protected final Logger logger = Logger.getLogger(getClass());
public void redtest(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)
throws Exception {
Student stu1 = new Student(1, "goodboy", 20, "boy", " , ", "123456789123456789");
Student stu2 = new Student(2, "goodboy", 20, "boy", " , ", "123456789123456789");
List<Student> stus = new ArrayList<Student>();
stus.add(stu1);
stus.add(stu2);
ClassS classs = new ClassS(1, "class1", stus);
stu1.setClasss(classs);
stu2.setClasss(classs);
System.out.println();
String text = JSONObject.fromObject(classs, FiltrateUtil.filtrate(new String[] { "classs" })).toString();
try {
response.setContentType("text/x-json;charset=UTF-8");
response.getWriter().write(text);
response.flushBuffer();
} catch (IOException e) {
logger.error(e);
}
}
}
フィルタ:
package test;
import net.sf.json.JsonConfig;
import net.sf.json.util.PropertyFilter;
/**
*
* : json
*
*/
public class FiltrateUtil {
public static JsonConfig filtrate(final String[] str) {
JsonConfig config = new JsonConfig();
config.setJsonPropertyFilter(new PropertyFilter() {
public boolean apply(Object source, String name, Object value) {
if(str!=null&&str.length>0){
boolean flag = false;
for(int i = 0;i<str.length;i++){
if (name.equals(str[i])) {
flag = true;
break;
}
}
return flag;
}else{
return false;
}
}
});
return config;
}
}
データがクライアントに転送されると、簡単にデータを取り出すことができます.
まずあなたのページにjqueryを導入します.min.js
<script type="text/javascript" src="jquery.min.js"></script>
コードは次のとおりです.
$(document).ready(function(){
$.ajax({
type: "POST",
url: "${ctx}/stockCheckAction.do?method=redtest",
success: function(msg){
alert("classId:"+msg.id+",className:"+msg.name);
alert("student1---:id"+msg.students[0].id+",name:"+msg.students[0].name+",address:"+msg.students[0].address);
alert("student2---:id"+msg.students[1].id+",name:"+msg.students[1].name+",address:"+msg.students[1].address);
}
});
});
ここでは簡単に取り出して見るだけですが、jsonデータを処理できるjsコンポーネントを使用すると、あなたのコンポーネントにデータが伝わります.データをポップアップできない場合は、msgをeval(msg)の下で処理します.
取り出したデータは、ページのテキストボックスに値を付けたり、jsコードで使用したりすることができます.