ajax客户端技术与前端

最新推荐文章于 2023-04-11 11:24:51 发布

夏尔子爵

最新推荐文章于 2023-04-11 11:24:51 发布

阅读量85

点赞数

本文链接：https://blog.csdn.net/weixin_49074309/article/details/117632571

版权

一javascript
前端问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>The Goods Page</h1>
  <div>
  <form >
               <ul>
                <li>商品编号:
                <li><input id="Id" type="text" name="name" placeholder="请输入商品编号">
                <li>商品名称:
               <li><input id="nameId" type="text" name="name" placeholder="请输入商品名称">
                <li>商品标记:
               <li><input id="remarkId" type="text" name="name" placeholder="请输入商品标记">
                <li><button type="button" onclick="doSaveGoods()">保存</button> 
               </ul>   
            </form>
      <table>
          <thead>
             <tr>
                 <th>id</th>
                 <th>name</th>
                 <th>remark</th>
                 <th>createdTime</th>
                 <th>operation</th>
             </tr>
          </thead>
          <tbody id="tbodyId">
             <tr><td colspan="4">Data is loading ....</td></tr>
          </tbody>
      </table>
  </div>
  <script type="text/javascript">
  function doAjaxGet(url,params,callback){
      //1.创建XmlHttpRequest对象
       var xhr=new XMLHttpRequest();
      //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立，请求是否在处理，响应是否已产生)
       xhr.onreadystatechange=function(){//callback(回调函数)
        //基于xhr对象获取的通讯状态，对响应数据进行处理
           if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
        	   //服务端响应的结果会传递给XHR对象，我们可以借助responseText获取响应结果
        	   callback(xhr.responseText);
           }
      };
     //3.创建与服务端的连接
      xhr.open("GET",url+"?"+params,true);//true表示异步
      //4.发送请求
      xhr.send(null); //Get请求，send方法不传内容
    //5.对响应结果进行处理(在回调函数中处理)。
 }

  function doHandleResponseResult(result){
	   //1.将json格式字符串转换为json格式的JS对象(字符串无法直接提取内容)
	   var jsonObj=JSON.parse(result);//JSON为JS中的一个类
	   //2.迭代jsonObj数组对象，并将内容呈现在tbody中
	   //2.1 将每一行内容封装到tr对象中
	   var trs="";
	   for(var i=0;i<jsonObj.length;i++){//循环一次取一行
		   trs+="<tr>"+
		         "<td>"+jsonObj[i].id+"</td>"+
		         "<td>"+jsonObj[i].name+"</td>"+
		         "<td>"+jsonObj[i].remark+"</td>"+
		         "<td>"+jsonObj[i].createdTime+"</td>"+
		         "<td><a οnclick=doDeleteById("+jsonObj[i].id+")>delete</a></td>"+
		        "</tr>";
	   }
	   //2.2将所有的tr添加到tbody中
	   var tBody=document.getElementById("tbodyId");
	   tBody.innerHTML=trs;
 }
  function doGetGoods(){
	   //1.定义请求url
	   var url="doFindGoods";
	   //2.定义请求参数
	   var params="";
	   //3.发送异步请求
	   doAjaxGet(url,params,function(result){//callback
		   //将服务端响应的结果输出到控制台
		   console.log("result",result);//jsonStr
	       //处理响应结果(将响应结果更新到页面上)
	       doHandleResponseResult(result);
	   });
  }
  doGetGoods();
 function doDeleteById(id){
	 var url="doDeleteById";
	   
	   var params="id="+id;
	  
	   doAjaxGet(url,params,function(result){
		   
		  alert(result);
	      
		   doGetGoods();
	   });
 }
 


 function doAjaxPost(url,params,callback){
	 //1.创建XmlHttpRequest对象
	 var xhr=new XMLHttpRequest();
	 //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程.
	 xhr.onreadystatechange=function(){//callback(回调函数)
		 //基于xhr对象获取的通讯状态，对响应数据进行处理
		 if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
			//服务端响应的结果会传递给XHR对象，
                  //我们可以借助xhr.responseText获取响应结果
			callback(xhr.responseText);
		 }
	 };
	 //3.创建与服务端的连接
	 xhr.open("POST",url,true);//true表示异步
	 xhr.setRequestHeader("Content-Type",
       "application/x-www-form-urlencoded");
	 //4.发送请求
	 xhr.send(params); //post请求将参数写到send方法
	 //5.对响应结果进行处理(在回调函数中处理)。
 }
 function doSaveGoods(){
	   //1.定义请求url
	   var url="doSaveGoods";
	   //2.定义请求参数
	   var idObj=document.getElementById("Id");
	   var nameObj=document.getElementById("nameId");
       var remarkObj=document.getElementById("remarkId");
	   var params="id="+idObj.value+"&name="+nameObj.value+"&remark="+remarkObj.value;
	   doAjaxPost(url,params,function(result){
		  alert(result);
		  doGetGoods();
	   })
}

  </script>
</body>
</html>

pojo

package com.cy.pojo;

import java.util.Date;

import com.fasterxml.jackson.annotation.JsonFormat;

public class goods {
	private Long id;
	private String name;
	private String remark;
	
	@JsonFormat(pattern="yyyy/MM/dd HH:mm:ss")
	private Date createdTime;
	
	public Long getId() {
		return id;
	}
	public void setId(Long id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getRemark() {
		return remark;
	}
	public void setRemark(String remark) {
		this.remark = remark;
	}
	public Date getCreatedTime() {
		return createdTime;
	}
	public void setCreatedTime(Date createdTime) {
		this.createdTime = createdTime;
	}
	@Override
	public String toString() {
		return "goods [id=" + id + ", name=" + name + ", remark=" + remark + ", createdTime=" + createdTime + "]";
	}
	
}

control

package com.cy.control;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.cy.pojo.goods;
import com.cy.service.goodsService;

@Controller
@RequestMapping("/goods/")
public class goodcontrol {
	@Autowired
	private goodsService goodsservice;
	 @RequestMapping("doGoodsUI")
	  public static String doGoodsUI() {
	  	   return "goods";
	  }
	
	 @RequestMapping("doFindGoods")
	 @ResponseBody
	  List<goods> doFindGoods()throws Exception{
	  List<goods> list=goodsservice.afindGoods();
	  return list;
	  }
	  
	  @RequestMapping("doDeleteById")
		 @ResponseBody
		 public String doDeleteById(Integer id) {
		 goodsservice.deleteById(id);
		  return "save ok";
		  }
	  @RequestMapping("doSaveGoods")
	  @ResponseBody
		public String doSaveGoods(goods entity) {
			
			goodsservice.saveGoods(entity);
			
			return "insert ok";
		}
}

service

package com.cy.dao;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import com.cy.pojo.goods;

@Mapper
public interface goodsDao {
	@Delete("delete from tb_goods where id=#{id} ")
	 int deleteId (Integer id);

	@Select("select * from tb_goods")
	 List<goods> findObjects();
    @Insert("INSERT INTO tb_goods (id,name,remark,createdTime)VALUES (#{id},#{name},#{remark},now())")
	int insertGoods(goods entity);
}

package com.cy.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.cy.dao.goodsDao;
import com.cy.pojo.goods;
@Service
public class goodsServiceImpl implements goodsService {
	@Autowired
	private goodsDao goodsDaos;
	@Override
	public List<goods> afindGoods() {
		// TODO Auto-generated method stub
		List<goods>list=goodsDaos.findObjects();
		return list;
	}
	@Override
	public int deleteById(Integer id) {
	int rows=	goodsDaos.deleteId(id);
		return rows;
	}
	@Override
	public int saveGoods(goods entity) {
		int rows=	goodsDaos.insertGoods(entity);
		return rows;
	}

}

dao

package com.cy.dao;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import com.cy.pojo.goods;

@Mapper
public interface goodsDao {
	@Delete("delete from tb_goods where id=#{id} ")
	 int deleteId (Integer id);

	@Select("select * from tb_goods")
	 List<goods> findObjects();
    @Insert("INSERT INTO tb_goods (id,name,remark,createdTime)VALUES (#{id},#{name},#{remark},now())")
	int insertGoods(goods entity);
}

二jquery
1在static中引入jquery文件
前端html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <div>
        <button onclick="doAjax()">$.ajax(...)</button>
        <button onclick="doAjaxGet()">$.get(...)</button>
        <button onclick="doAjaxGetJSON()">$.getJson(...)</button>
        <button onclick="doAjaxPost()">$.post(...)</button>
        <button onclick="doAjaxPostJSON()">$.ajaxPostJSON(...)</button>
        <button onclick="doAjaxLoad()">$("selecor").load(...)</button>
    </div>
      <div id="result"></div>
    <script type="text/javascript"  src="/js/jquery.min.js"></script>
      <script  type="text/javascript">
   
     
    	 function doAjaxGet(){
             //1.url
             var url="doFindGoods";
             //2.params
             var params="";
             //3.send ajax get request
             $.get(url,params,function(result){//success
                 console.log(result);//json格式的对象
             },"json");
         }
    	 function doAjaxGetJSON(){
    		 
    		  var url="doFindGoods";
              //2.params
              var params="";
              //3.send ajax get request
              $.getJSON(url,params,function(result){//success
                  console.log(result);//json格式的对象
              });
    	 }
    	 
 function doAjaxPost(){
	   var url="doSaveGoods";
           
	//   var params="id=12&name=xiaomi&remark=x&createdTime=2021/06/06 12:05:59";
	//   var params="id="+12+"&name="xiaomi"&remark="good; 
	var params={"id":"18","name":"huawei","remark":"h","createdTime":"2021/06/06 12:05:59"};
           $.post(url,params,function(result){
        	   alert(result);
           });
   }
 function doAjax(){
	 
	  var url="doFindGoods";
     
      let params="";
      
      $.ajax({
          type:"GET",
          url:url,
          data:params,
          dataType:"text",
          async:true,
          success:function(result) {
        	  console.log(result);
          }
      });
 }
 function doAjaxLoad(){
	 
	 
     var url="doFindGoods";
     
     $("#result").load(url,function(){//资源加载完成以后执行
         console.log("load complete");
     });
 }
      </script>
</body>
</html>

control

	  
	  @RequestMapping("doAjaxGet")
	  public static String doAjaxGet() {
	  	   return "jquery";
	  }

三Ajax 编程框架基本实现

(function(){
	//定义一个函数，可以将其连接为java中的类
	var ajax=function(){}
	//在变量ajax指向的类中添加成员，例如doAjaxGet函数，doAjaxPost函数
	ajax.prototype={
	   doAjaxGet:function(url,params,callback){
		      //创建XMLHttpRequest对象，基于此对象发送请求
		      var xhr=new XMLHttpRequest();
		      //设置状态监听(监听客户端与服务端通讯的状态)
		      xhr.onreadystatechange=function(){//回调函数，事件处理函数
		          if(xhr.readyState==4&&xhr.status==200){
		             //console.log(xhr.responseText);
		             callback(xhr.responseText);//jsonStr
		          }
		      };
		      //建立连接(请求方式为Get,请求url,异步还是同步-true表示异步)
		      xhr.open("GET",url+"?"+params,true);
		      //发送请求
		      xhr.send(null);//GET请求send方法不写内容
		    },

	      doAjaxPost:function(url,params,callback){
		      //创建XMLHttpRequest对象，基于此对象发送请求
		      var xhr=new XMLHttpRequest();
		      //设置状态监听(监听客户端与服务端通讯的状态)
		      xhr.onreadystatechange=function(){//回调函数，事件处理函数
		          if(xhr.readyState==4&&xhr.status==200){
		             //console.log(xhr.responseText);
		             callback(xhr.responseText);//jsonStr
		          }
		      };
		      //建立连接(请求方式为POST,请求url,异步还是同步-true表示异步)
		      xhr.open("POST",url,true);
		      //post请求传参时必须设置此请求头
		        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

		      //发送请求
		      xhr.send(params);//post请求send方法中传递参数
	   }
	}
	window.Ajax=new ajax();
})()

夏尔子爵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
ajax客户端技术与前端

一javascript前端问题<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><h1>The Goods Page</h1> <div> <form > <ul&g
复制链接

扫一扫