Dom mutual conversion with jquery
DOM is the Document Object Model (Document Object Model, referred to as DOM)
jQuery is a JavaScript library that greatly simplifies JavaScript programming.
- dom and jq system conversion, jq jq method can only use the object, the object can only use built-dom dom method, not channeling each
$ ( "# test") // jq objects
$ ( "# test") [ 0] // dom target
$ ( "# test") get (0) // dom objects.
var dom = document.getElementById ( "the Test"); // dom target
$ (dom) // jq Object
case:
//这是一个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 native Ajax request
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 request
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(); //页面加载完成就执行该方法
});
Server native code:
//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 Code:
msg categories:
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 data back to the callback method:
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 Code:
msg msg class of Class Reference ssm.
Json data back to the callback method:
//管理员模糊分页查询用户
@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 background receive data
Reception request
var params = {“xxx”:“xx”}
$.ajax({
type:”post”,
ansyv:true,
data:params,
datatype:”json”,
url:””,
success:function(data){
},
error:function(){
}
})
java background receive data
method one:
public String getData(HttpServlettRequest request){
String ss= request.getParameter(“xxx”); //ss=>xx
}
Method Two:
public String getData(){
HttpServletRequest request= ServletActionContext.getRequest();
String ss = request.getParameter("xxx"); //ss=>xx
}
Method three:
the need Spring mvc
rear end of the corresponding key acquired by @RequestParam (value = "xxx") String xxx respectively
@RequestMapping(value="/example1", method=RequestMethod.GET)
public @ResponseBody String emrSubmit(
@RequestParam(value="id") String id,
@RequestParam(value="name") String name
){
//...
}
Method four:
the need Spring mvc
backend by @RequestParam Map <String, Object> param all-time acquisition of key-value pairs
@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: difference html (), text (), val () method
1.HTML
html (): get the first match html content elements. This function can not be used in XML documents. But it can be used for XHTML documents
html (val): set the html contents of each matched element. This function can not be used in XML documents. But it can be used for XHTML documents.
2.TEXT
text (): access to all content matching elements.
The result is a combination of all of the text element contains a matching up text. This method is effective for both HTML and XML documents.
text (val): Set all matched elements text
and HTML () is similar, but the HTML coding (the "<" and ">" with the corresponding HTML entities).
3.VAL
Val (): get the first the current value of the matching element.
val (val): Set a value of each element of the match.