处理ajax返回的js代码

2019独角兽企业重金招聘Python工程师标准>>>

1.====普通方式 调用 ajax处理 返回 的 responseText=======================》

 

//下面主要是对 返回 responseText 进行分析 ：

 

                //方法1, 如果responseText是没有script标签的，并且是纯JS 代码,可以eval 方法执行
                //eval(XMLHTTPRequest.responseText);

                // 方法2 ,创建script对象 ,修改text属性的值
                 var script_obj=document.createElement("script");
                 script_obj.text = XMLHTTPRequest.responseText;

                //追加对象到body中

                 document.body.appendChild(script_obj);

 

               //  或者下面的 追加到head中

               document.getElementsByTagName("head")[0].appendChild(script_obj);

 

              由于对JS 在dom中执行 加载的顺序 不是很清楚 所以 需要学习

 

2.===============================================================》

---------------------------------->

//①下面贴出 简单的jquery的ajax处理JS 设置 dataType 类型为script ，自动执行JS脚本

 

 

 $(document).ready(function() {

      $("#company").focus();
      $("#company").mouseup(function() {
         $.ajax({
                type: "POST",
                url: "checkCompanyExist.action",
                data: "companyName="+$("#company").val(),
                async: false,
                 //关键地方
                 dataType: "script"
          });
     });
 });

 

//页面：

 <input name="companyName" id="company" type="text" />
                         <span id="msg1" style="color:red ">span>

 

 

//上面的大致意思就是 获取 company文本输入框的 mouseup事件

//通过ajax调用 后台 action ,我的后台是 struts2 action

// 调用成功 action返回一个jsp页面 如下，

 <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <%@ taglib uri="/struts-tags" prefix="s"%>
 var divInnerHTML = '${msg}';

 $("#msg1").html(divInnerHTML);

 

jquery的ajax调用 说明 jquery 对ajax的封装还是 比较简单的！因为我是新手

 

-------------------------------------->

// ②使用这个 $.get（）调用ajax    ，处理结果 . 直接执行JS

 

 $(document).ready(function() {

     $("#company").focus();
  $("#company").mouseup(function() {
     $.get("checkCompanyExist.action?companyName="+$("#company").val(), function(data){
            eval(data);
      });
 });
 );

 

-------------------------------------->

// ③ 对返回的结果进行处理,直接执行JS

//用  $.ajax还有个好处就是 在向 后台 参数的时候不会有乱码问题

 

 $(document).ready(function() {
     $("#company").focus();
  $("#company").mouseup(function() {
     $.ajax({
               type: "POST",
               url: "checkCompanyExist.action",
               data: "companyName="+$("#company").val(),
               async: false,
               success: function(msg){
                  eval(msg);
                }
         });
 });
 );

 

 

//做点有用的东西

//下面是修改(copy) 好友的 天气预报 

 $(document).ready(function() {
     $("#search").click(function() {
         $.ajax({
                type: "GET",
                url:  "http://www.google.cn/search",
                data: "hl=zh-CN9&btnG=Google+%E6%90%9C%E7%B4%A2&meta=&aq=f&oq=&q=tq",
                 async: false,
                 success: function(msg){
                 var data = msg;
                 var begin = data.indexOf("添加到 iGoogle");
                 var end = data.indexOf("北京市专业气象台");
                 var weather = data.substring(begin+29 ,end-35 );
                 var s=weather.split("/images");
                 for(var i=0;i
                     s[i]=s[i]+"http://www.google.cn/images";
                 }
                 var xs=s.join("");
                 $("#wea").html(xs);

                 }
          });

     });
 });

 //HTML页面

 

 <input  type="button" value="天气查询" id="search">input>
   <div id="wea">div>

转载于:https://my.oschina.net/mickelfeng/blog/93213