1.ajxs post请求数字、字符串、单个值
jsp 代码
<p><span>输入姓名:</span><input type="text" name="username" id="username" onchange="th()"/></p>
script代码
<script src="/jquery.min.js" type="text/javascript"></script>
<script>
function th() {
$.post("/show",function (date) {
alert(date)
})
}
</script>
java代码
@RequestMapping("/show")
public void show(HttpServletResponse response) throws IOException {
response.getWriter().print("11231");
}
2.ajxs getJSON请求list 集合
jsp代码
<p><span>输入姓名:</span><input type="text" name="username" id="username" onchange="th()"/></p>
script 代码 K:下标 V:值
<script src="/jquery.min.js" type="text/javascript"></script>
<script>
function th() {
$.getJSON("/show",function (date) {
$.each(date,function (K,V) {
alert(V)
})
})
}
</script>
java 代码
@RequestMapping("/show")
public void show(HttpServletResponse response) throws IOException {
List<String> list=new ArrayList<>();
list.add("agvdha");
list.add("123");
list.add("456");
list.add("778");
response.getWriter().print(JSONArray.fromObject(list));
System.out.println(JSONArray.fromObject(list));
}
3.ajxs getJSON请求对象 返回键值对 K: 对应着属性名称 V 对应着属性值
jsp 代码
<p><span>输入姓名:</span><input type="text" name="username" id="username" onchange="th()"/></p>
script 代码
<script src="/jquery.min.js" type="text/javascript"></script>
<script>
function th() {
$.getJSON("/show",function (date) {
$.each(date,function (K,V) {
/*属性 :name || pwd*/
alert(K)
/*属性值 :1234154 || 998*/
alert(V)
})
})
}
</script>
java 代码
@RequestMapping("/show")
public void show(HttpServletResponse response) throws IOException {
User user=new User();
user.setName("1234154");
user.setPwd("998");
response.getWriter().print(JSONObject.fromObject(user));
}
4.总结
ajxs 请求返回一个参数可使用 第一种方式
ajxs 请求返回一个对象、map 可使用 第三种方式
ajxs 请求返回一个list集合、数组可使用 第三种方式
多个参数必须使用JOSN
5.三级联动 方法封装
jsp代码
<select name="ooo" id="">
</select>
<p><span>输入姓名:</span><input type="text" name="username" id="username" onchange="hhh()"/></p>
script 代码
<script src="/jquery.min.js" type="text/javascript"></script>
<script>
function th() {
$.getJSON("/show",function (date) {
$.each(date,function (V,OP) {
$("select[name='ooo']").append("<option value='"+OP+"'>"+OP+"</option>")
})
})
}
function hhh(){
th("/show","select[name='ooo']")
}
</script>
java 代码
@RequestMapping("/show")
public void show(HttpServletResponse response) throws IOException {
List<String> list=new ArrayList<>();
list.add("10");
list.add("20");
list.add("30");
list.add("40");
response.getWriter().print(JSONArray.fromObject(list));
System.out.println(JSONArray.fromObject(list));
}