js和ajax处理方法

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%-- <%request.setCharacterEncoding("utf-8"); %> --%>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<title>Insert title here</title>

</head>

<script type="text/javascript">

function getResult(stateVal) {

   var url = "MainServlet";

   if (window.XMLHttpRequest) {

      req = new XMLHttpRequest();

   } else if (window.ActiveXObject) {

      req = new ActiveXObject("Microsoft.XMLHTTP");

   }

  if (req) {

     req.open("GET", url, true);

      req.onreadystatechange = function() {

     if (req.readyState == 4 && req.status == 200) {

     var result = req.responseText;

processor(result);     }    };    req.send(null);   }  }  function processor(result) {   var categoryTable = document.getElementById("categoryTable");      var categotys = result.split(";");   for(var i in categotys) {    if(categotys[i] == null || ‘‘ == categotys[i]) {     continue;    }    var fields = categotys[i].split(",");     var j = 0;     var tr = document.createElement("tr");     var td1 = document.createElement("td");     var td2 = document.createElement("td");     td1.innerHTML = fields[j].split(":")[1];     td2.innerHTML ="<a href=# onclick= getCategoryId(" + fields[j].split(":")[1] + ");>" + fields[j+1].split(":")[1] + "</a>";     tr.appendChild(td1);     tr.appendChild(td2);     categoryTable.appendChild(tr);   }  }  /* function descRow(categoryid) {   alert(categoryid);   getCategoryId(categoryid);   //document.body.innerHTML = document.body.innerHTML + "<br>" + result;  }  */  function getCategoryId(categoryid) {   var url = "MainCateId?state="+categoryid;   if (window.XMLHttpRequest) {    req = new XMLHttpRequest();   } else if (window.ActiveXObject) {    req = new ActiveXObject("Microsoft.XMLHTTP");   }   if (req) {    req.open("GET", url, true);    req.onreadystatechange = function() {     if (req.readyState == 4 && req.status == 200) {      var descResult = req.responseText;      productDesc(descResult);     }    };    req.send(null);   }  }  function productDesc(descResult) {   var productTable = document.getElementById("productTable");   //document.body.innerHTML = document.body.innerHTML + "<br>" + descResult;   var products = descResult.split(";");   for(var i in products) {    //id:1,categoryid:1,normalprice:3000.0,name:电视,memberprice:2000.0,descr:海信,pdate:2014-09-24 08:33:53.0;    //id:3,categoryid:1,normalprice:3000.0,name:电脑,memberprice:2000.0,descr:dell,pdate:2014-09-24 08:36:12.0;    if(products[i] == null || ‘‘ == products[i]) {     continue;    }    var fields = products[i].split(",");    for(var j in fields) {     var tr = document.createElement("tr");     var td1 = document.createElement("td");     var td2 = document.createElement("td");     td1.innerHTML = fields[j].split(":")[0];     td2.innerHTML = fields[j].split(":")[1];     tr.appendChild(td1);     tr.appendChild(td2);     productTable.appendChild(tr);    }       }  } </script>  <body >

<h1>欢迎你<%=request.getParameter("user")%></h1> <table border = ‘2‘ id=‘categoryTable‘>  <tr>   <td width="20%">编号</td>      <td width="50%">类型</td>     </tr> </table> <br><br><br> <table border =‘2‘ id =‘productTable‘> <tr>   <td width="20%">商品内容</td>      <td width="30%">商品详情</td>   </tr> </table>  </body> </html>

时间: 2024-10-08 19:59:25

js和ajax处理方法的相关文章

js封装ajax的方法

常用的ajax请求方法封装 /** * ajax请求的封装代码 */ function ajaxPost(url, params, cb) { $.ajax({ type : 'post', url : url, data : params, cache : false, success : function(data) { cb(data); }, error : function(err) { alert("服务器异常"); } }); } function ajaxGet(url

原生js实现ajax的方法

var Ajax={ get: function (url,fn){ var obj=new XMLHttpRequest(); // XMLHttpRequest对象用于在后台与服务器交换数据 obj.open('GET',url,true); obj.onreadystatechange=function(){ if (obj.readyState == 4 && obj.status == 200) { // readyState==4说明请求已完成 fn.call(this, ob

jquery中ajax如何返回值到上层函数的方法以及对于js处理json对象方法的记录

①在我们做前端js处理的时候我们经常会将一些公用的js方法封装起来,方便别的地方调用,但是我们要做的是需要将请求返回的值传递给调用者,这里我记录了在js中采用ajax方法获取后台数据并返回给调用者的方法,我们平时使用ajax的方法基本为如: <span style="font-family:FangSong_GB2312;font-size:18px;">function AutoGetOpenid(){ var personJson; $.ajax({ url : &qu

2-jQuery - AJAX load() 方法【进阶篇】

第一篇的AJAX load() 方法过于简单,补充一下,完整的. 格式 $(selector).load(URL,data,callback); 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-2.1.4.min.js"><

通过原生js的ajax或jquery的ajax获取服务器的时间

在实际的业务逻辑中,经常是与时间相关的,而前端能获得的时间有两个:客户端的时间,服务器的时间.客户端时间通过 javascript中的Date对象可以获取,如 Java代码   var dt = new Date(); var tm = dt.getTime(); 那么tm就是客户端的时间,另外也可以通过对应的getFullYear(),getMonth(),getDate()取到对应的年月日等...但这个时间可靠吗?好吧,那取服务器时间吧经常用到的是后台写一个php,jsp,cgi,asp..

原生JS封装AJAX

今天我们来说说利用原生JS封装AJAX. jquery框架的AJAX方法确实很好用,但有时候我们写的页面需要引入多个JS插件,不一定哪个插件就会和jquery发生冲突,导致jquery用不了了.或者页面比较简单,不需要加重浏览器的负担,这时我们自己封装一个AJAX就是一个很好的办法. //将数据转换成 a=1&b=2格式;function json2url(json){   var arr = [];   //加随机数防止缓存;   json.t = Math.random();   for(v

浅谈JS之AJAX

0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HTTP和web服务器进行数据交换(用户不知道也感觉不出来,就跟桌面应用程序似的进行数据交互),它不会导致页面重新加载,这样才有更好的用户体验. Ajax是基于以下开放标准: javascript(DOM) css html xml(json) 通俗的说就是使用了javascript(DOM)的XMLH

原生ajax与封装的ajax使用方法

当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考http://www.cnblogs.com/heyujun-/p/6793900.html网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'

Vue.js&mdash;&mdash;基于$.ajax实现数据的跨域增删查改

概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的. 说起ajax请求,大家第一时间会想到jQuery.除了拥有强大的DOM处理能力,jQuery提供了较丰富的ajax处理方法,它不仅支持基于XMLHttpRequest的ajax请求,也能处理跨域的JSONP请求. 之前有读者问我,Vue.js能结合其他库一起用吗?答案当然是肯定的,V