Dom与Jquery的ajax

﹏ヽ暗。殇╰゛Y 2022-04-27 16:20 207阅读 0赞

# Dom与jquery互相转换 #

DOM是文档对象模型（Document Object Model，简称DOM）  
jQuery是一个JavaScript 库，极大地简化了JavaScript编程。

*  dom与jq互转，jq对象只能用jq方法，dom对象只能用内置的dom方法，不能互窜  
    $("\#test") //jq对象  
    $("\#test")\[0\] //dom对象  
    $("\#test").get(0) //dom对象  
    var dom = document.getElementById(“test”); //dom对象  
    $(dom) //jq对象  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70]案例：

//这是一个JavaScript对象
      var variable =                     
      //这就是个jQuery对象
      var $variable = $()            
      //这是一个DOM对象，方法包括getElementById( )，getElementByTagName( )...
      var variable = document.get...     
    //dom与jquery互相转换
       //取得<input>标签中的value属性的内容[dom对象->jquery对象]
        var inputElement = document.getElementById("inputID");//DOM对象
        var $input = $(inputElement);//jQuery对象
        var value = $input.val();
        alert(value);
        //取得 <div>标签中的文本内容[jquery对象->dom对象，方法一]
        var $div = $("#divID");//jQuery对象
        var divElement = $div[0];//DOM对象
        var html = divElement.innerHTML;
        alert(html);
        //取得<div>标签中的文本内容[jquery对象->dom对象，方法二]
        var $div = $("#divID");//jQuery对象
        var divElement = $div.get(0);//DOM对象
        var html = divElement.html();
        alert(html);

Dom原生Ajax请求

jquery的Ajax请求

## 服务端原生代码： ##

//Java代码：后台获取单个数控定位器的历史表格的数据
    //请求路径看get(),post()里面的逻辑分配
        public void getHistorySingleData() throws IOException{ 
            HttpServletRequest request = ServletActionContext.getRequest();
            HttpServletResponse response = ServletActionContext.getResponse();
            response.setHeader("Content-type", "text/html;charset=UTF-8");
            response.setContentType("text/html;charset=utf-8");
            String deviceName = request.getParameter("deviceName");
            String startDate= request.getParameter("startDate");
            String endDate = request.getParameter("endDate");
            SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData(deviceName,startDate, endDate);
            System.out.println(singleHistoryData.length);
            System.out.println(JSONArray.fromObject(singleHistoryData).toString());
            //打印：[{"time":"2016-11-11 10:00:00","state":"运行","ball":"锁紧",....},{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....},{},{}....]查到几条singleHistoryData对象就打印几个对象的信息{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....}
            //将json数据回传给回调函数
            response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());
        }

## SSM代码： ##

msg类：

package com.xiaoyu.shop.bean;
    
    import java.util.HashMap;
    import java.util.Map;
    
    /** * 通知返回类 * @author Administrator * */
    public class Msg { 
    	//状态码 100-成功 200-失败
    	private int code;
    	//提示信息
    	private String msg;
    	
    	//用户要返回给浏览器的数据
    	private Map<String, Object> extend = new HashMap<String, Object>();
    
    	public static Msg success(){ 
    		Msg result = new Msg();
    		result.setCode(100);
    		result.setMsg("处理成功！");
    		return result;
    	}
    	
    	public static Msg fail(){ 
    		Msg result = new Msg();
    		result.setCode(200);
    		result.setMsg("处理失败！");
    		return result;
    	}
    	
    	public Msg add(String key,Object value){ 
    		this.getExtend().put(key, value);
    		return this;
    	}
    	
    	public int getCode() { 
    		return code;
    	}
    
    	public void setCode(int code) { 
    		this.code = code;
    	}
    
    	public String getMsg() { 
    		return msg;
    	}
    
    	public void setMsg(String msg) { 
    		this.msg = msg;
    	}
    
    	public Map<String, Object> getExtend() { 
    		return extend;
    	}
    
    	public void setExtend(Map<String, Object> extend) { 
    		this.extend = extend;
    	}
    	
    	
    }

将json数据回传给回调函数的方法：

package com.xiaoyu.shop.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import com.xiaoyu.shop.bean.Msg;
    
    @Controller
    public class AdminController { 
        /** * 管理员登录 * /adminlogin : 请求路径 */
        @RequestMapping("/adminlogin")
        @ResponseBody
        public Msg userLogin(@RequestParam(value = "adminName") String adminName,
                @RequestParam(value = "adminPassword") String adminPassword) { 
            System.out.println(adminName + "+" + adminPassword);
            if (adminName.equals("admin") && adminPassword.equals("admin")) { 
                return Msg.success().add("msg", "管理员登录成功");
            } else { 
                return Msg.fail().add("msg", "管理员登录失败");
            }
        }
    
    }

## SpringBoot代码： ##

msg类参考ssm的msg类。  
将json数据回传给回调函数的方法：

//管理员模糊分页查询用户
        @RequestMapping("/admin_LikeUserList")
        @ResponseBody
        public Msg admin_LikeUserList(@RequestParam(value = "pn", defaultValue = "") Integer pn,
                                      @RequestParam(value = "userName", defaultValue = "") String userName){ 
            System.out.println(pn + ";" + userName);
            PageHelper.startPage(pn, 5);
            List<User> UserList = userService.LikeUserList(userName);
            for(User s:UserList){ 
                System.out.println(s.toString());
            }
            PageInfo page = new PageInfo(UserList, 5);
            return Msg.success().add("pageInfo", page);
        }

# java后台接收数据 #

前台请求

var params = { “xxx”：“xx”}
    $.ajax({ 
        type:”post”,
        ansyv:true,
        data:params,
        datatype:”json”,
        url:””,
        success:function(data){ 
        },
        error:function(){ 
        }
    })

## java后台接收数据 ##

方法一：

public String getData(HttpServlettRequest request){ 
        String ss= request.getParameter(“xxx”); //ss=>xx
    }

方法二：

public String getData(){ 
    HttpServletRequest request=  ServletActionContext.getRequest();  
        String ss =  request.getParameter("xxx");  //ss=>xx
    }

方法三：  
需要Spring mvc  
后端通过 @RequestParam(value=”xxx”) String xxx 分别获取对应的键值对

@RequestMapping(value="/example1", method=RequestMethod.GET)
    public @ResponseBody String emrSubmit(
          @RequestParam(value="id") String id，
          @RequestParam(value="name") String name
    ){ 
      //...
    }

方法四：  
需要Spring mvc  
后端通过 @RequestParam Map <String,Object> param 一次性获取全部的键值对

@RequestMapping(value="/example1", method=RequestMethod.GET)
    public @ResponseBody String emrSubmit(
          @RequestParam Map<String,Object> param
    ){ 
      //提取前端传来的具体参数
      String id = (String)params.get("id");
      String name = (String)params.get("name ");
      //...
    }

# jQuery：html(),text(),val()方法的区别 #

1.HTML  
html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档  
html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。  
2.TEXT  
text():取得所有匹配元素的内容。  
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。  
text(val):设置所有匹配元素的文本内容  
与 html() 类似, 但将编码 HTML (将 “<” 和 “>” 替换成相应的HTML实体).  
3.VAL  
val():获得第一个匹配元素的当前值。  
val(val):设置每一个匹配元素的值。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjUxMjY3_size_16_color_FFFFFF_t_70]: /images/20220121/79aec421fd1a4b03a32beb9f49769ccf.png