Dom与Jquery的ajax

Dom与Jquery的ajaxDom与Jquery的ajax

大家好,又见面了,我是你们的朋友全栈君。

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对象
    在这里插入图片描述案例:
//这是一个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请求

function getHTTPObject(){
    if(typeof XMLHttpRequest == "undefined"){
        XMLHttpRequest = new ActiveXObject("MSXML2.XMLHTTP");  //兼容IE
    }
    return new XMLHttpRequest();
} 
//获取服务端数据
function getContent(){
    var request = getHTTPObject();
    if(request){
        //第一个参数是访问请求类型GET POST SEND, 
        //第二个参数是数据来源地址,一般指服务器接口
        //第三个参数代表是否异步方式发送和处理
        request.open("GET", "data.json", true);  
        request.onreadystatechange = function(){
            //readyState有5种值,0是未初始化 1是正在加载 2是加载完毕 3是正在交互 4是完成
            if(request.readyState == 4){
                console.log(request.responseText);
            }
        };
        request.send(null);
    }else{
        alert("Sorry, Error");
    }
}

jquery的Ajax请求

function findAllDepts() {
    $.ajax({
        async : false,    //表示请求是否异步处理
        type : "post",    //请求类型
        url : "/getDepts",//请求的 URL地址
        dataType : "json",//返回的数据类型
        success: function (data) {
          console.log(data);  //在控制台打印服务器端返回的数据
          for(var i=0;i<data.length;i++){
              console.log(data[i].deptId+" "+data[i].deptName);
          }
            $("select[name='depertmentId']").empty();
            $("select[name='depertmentId']").append('<option value="">——请选择——</option>');
            for(var i=0;i<data.length;i++){
                var html ='<option value="'+data[i].deptId+'">';
                html +=data[i].deptName + '</option>';
                $("select[name='departmentId']").append(html);  //将数据显示在html页面
            }
        },
        error:function (data) {
            alert(data.result);
        }
    });
};
 
$(document).ready(function () {
   findAllDepts();  //页面加载完成就执行该方法
});

服务端原生代码:

//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):设置每一个匹配元素的值。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106652.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • TDSCDMA SIB content[通俗易懂]

    TDSCDMA SIB content[通俗易懂]SIB1:包括NAS系统信息,UE在空闲态和连接态下所使用的定时器和常数信息。 SIB2:URAID信息。 SIB3:小区选择和重选的参数,包括Cellidentity、Cellselectionandre-selectioninfo和CellAccessRestriction三个信息IE。下面对这些IE的内容进行深入剖析。   

  • 校园小助手–智慧成绩统计服务平台

    校园小助手–智慧成绩统计服务平台

  • MySQL 事务隔离级别[通俗易懂]

    MySQL 事务隔离级别[通俗易懂]1.理论MySQL中事务的隔离级别一共分为四种,分别如下: 序列化(SERIALIZABLE) 可重复读(REPEATABLEREAD) 提交读(READCOMMITTED) 未提交读(READUNCOMMITTED) 四种不同的隔离级别含义分别如下: SERIALIZABLE ❝如果隔离级别为序列化,则用户之间通过一个接一个顺序地执行当前的事务,这种隔离级别提供了事务之间最大限度的隔离。 REPEATABLEREAD ❝在可

    2022年10月14日
  • idea好看的主题插件_idea主题美化插件

    idea好看的主题插件_idea主题美化插件文章来源|blog.csdn.net/weixin_46146269/article/details/104793277IntelliJIDEA介绍IDEA,全称IntelliJIDEA,是Java语言的集成开发环境,IDEA在业界被公认为是最好的java开发工具之一,尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS…

  • pycharm2021.11激活码_在线激活

    (pycharm2021.11激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • 《斯坦福算法博弈论二十讲》学习笔记(持续更新)

    《斯坦福算法博弈论二十讲》学习笔记(持续更新)《斯坦福算法博弈论二十讲》学习笔记(持续更新)第一章简介和实例第二章机制设计基础第三章迈尔森引理第四章算法机制设计第一章简介和实例羽毛球比赛中的规则漏洞12年伦敦奥运会的羽毛球赛事中发生了一件钻规则漏洞的“丑闻”。赛制规则如下:共分为两个小组,每个小组四只队伍,小组赛阶段各个小组的前两名晋级,A组第1名对阵B组第2名,A组第2名对阵B组第1名,之后进行两两淘汰赛。TZ是本届赛事公认的强队,已经提前小组赛出线。WY与JK进行一场小组赛,二者之间的胜者将会对阵TZ,因此两只队伍都不想赢,都在

    2022年10月15日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号