通过ajax处理json数组（ajax的书写格式）

追求卓越583

于 2022-10-09 09:40:26 发布

阅读量701

点赞数

分类专栏： JavaScript 文章标签： ajax json javascript

本文链接：https://blog.csdn.net/zhuiqiuzhuoyue583/article/details/127220767

版权

JavaScript 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

通过ajax动态来处理前台页面的课程名二级联动。（这个代码运行不成功，但是可以看看，注释，了解一下ajax的书写格式）

这个是前台页面的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        function getValue(element){
            //语法：Jquery.ajax([settings])
            $.ajax({
                //请求方式("post"或"get")
                type:"get",
                //向服务器请求的url地址
                url:"getajax",
                //发送到服务器的数据
                data:"action=getvalue",  //这里切记不可加空格 例如这种 action = getvalue
                //预期服务器返回的数据类型
                dataType:'json',
                //异步请求,如果值为true,则为异步请求
                async:true,
                //如果是成功，后面跟一个函数
                //data里包含了从后台返回到前台的数据data参数接收
                success:function(data){
                    for(var i=0;i<data.length;i++){
                        $(element).append("<option>"+data[i]+"</option>");
                      //这里的element是页面dom事件中onfocus="getValue(this) 中的this
                    }
                },
                //如果失败,则调用这个函数
                error:function(){
                    alert("error.......");
                }
            });
        }
    </script>
    </head>
    <body>
        <div>
            
            <select name="" id="select1" onfocus="getValue(this)">
                <option value="1">点击取值</option>
            </select>
            
        </div>
    </body>
</html>

下面为servlet处理的后台代码

package com.foreknow.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class GetValueAction extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        PrintWriter out = resp.getWriter();
        //获取请求参数
        String action = req.getParameter("action");
        if("getvalue".equals(action)){
            String[] str = getValue();
            JSONArray jArray = JSONArray.fromObject(str);
            //通过JSONArray将字符串数组转化为JSONArray的类型来传递给前台页面接收
            out.println(jArray.toString());
            //PrintWriter为字符打印输出流，他只能将字符串以流的方式传递给前台页面,所以将JSONArray类型转换为字符串String类型输出
        }
    }
   //   通过这个方法来得到课程数组  (这里是模仿后台查出来的假数据)
    public String[] getValue(){
        String[] str = new String[4];
        str[0] = "java";
        str[1] = "nodejs";
        str[2] = "angularjs";
        str[3] = "bootstrap";
        return str;
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(req, resp);
    }
}

参考：https://www.jianshu.com/p/38b2fa1992a2