首页 前端知识 Dom与Jquery的ajax

Dom与Jquery的ajax

2024-06-03 12:06:19 前端知识 前端哥 319 982 我要收藏

//取得

标签中的文本内容[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(‘——请选择——’);

for(var i=0;i<data.length;i++){

var html =‘’;

html +=data[i].deptName + ‘’;

$(“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类。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10619.html
标签
评论
发布的文章

vue学习计划

2024-06-08 18:06:08

fastjson1.2.24-RCE漏洞复现

2024-06-08 09:06:33

JsonPath用法详解

2024-06-08 09:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!