• Javascript与Ajax


      不使用jquery来处理ajax请求该怎么做?
      首先要明确html中的某些数据需要从服务端获得,也就是客户端向服务端请求(request)数据,服务端就响应(response)这个请求,把客户端要的数据给它。服务端返回的数据格式多样,即可以是字符串,也可以是数字,也可以是对象。客户端接到这些数据后按自己的需要处理后显示在Html页面上。这个处理工作就交给Javascript来做。
        Javascript处理Ajax异步请求要注意三点:
      1、创建一个新的XMLHttpRequest对象;
      2、创建一个获取数据的函数;
      3、创建一个回调函数;

      我们的目标是在文本框内输入名字传递给服务端,经过计算后在当前页面显示从服务端送回的数据。

    <!DOCTYPE html>
    <html>
      <body>
        <a href="http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/">Ajax study</a>
        </br>
        Enter your name:
        <input type="text" id="name" onChange="getInfo();" />
        </br>
        Show Ajax return data: <span id="getInfo"></span>
    
        <script type="text/javascript">
         // javascript Ajax
         // 创建新的请求对象
         var request =new XMLHttpRequest();
    
         // 获取数据
         function getInfo(){
           var name=document.getElementById('name').value;
           var url="/get_info/"+escape(name);
           // 打开请求
           request.open("GET",url, true);
           // 指定回调函数
           request.onreadystatechange=updatePage;
           // 发送请求(发送的内容为null表示通过Get请求)
           request.send(null);
         }
    
         // 回调函数(服务器向网页发起调用)
         function updatePage(){
           if(request.readyState==4){
             if(request.status==200){
               // 读取响应文本
               var response=request.responseText;
               // 可以处理返回的文本。若是json字符串则可转为对象以便处理。
               // 转换为json对象的方式多种:
               var jsonObj=eval('('+response+')');
               // 或者:
               var jsonobj=JSON.parse(response);
               // 把数据返回给页面
               document.getElementById('getInfo').innerHTML=jsonobj.name;
               alert('You enter is : '+ jsonobj.name);
             }
           else if(request.status==404)
             alert('request url does not exist.');
           else
             alert('error:status code is :' + request.status)
           }
         }
        </script>
      </body>
    </html>

    这里的

     var response=request.responseText;

    返回的就是一个字符串:

    "{
     "age": 2,
     "name": "Hello world "
    }"
    
    

    服务端代码:

    # 这个显示 info.html 页面
    @app.route('/info') def xxx(): return render_template('info.html')


    # 这个是要执行的动作(必须要有个路由,html页面里的js需要这个url。函数名字随便起。)
    @app.route('/get_info/<name>') def x (name): ls ={'name':name, 'age':2} return jsonify(ls)
     

    -- End --

  • 相关阅读:
    10. 正则表达式匹配(动态规划)
    8. 字符串转换整数 (atoi)
    5. 最长回文子串
    4. 寻找两个正序数组的中位数
    1109. 航班预订统计
    计算机网络面试整理
    HTTP 响应 代码
    Tomcat 安装 2019.1.20
    ubuntu 编译 jdk (三)
    ubuntu 编译 jdk (二)
  • 原文地址:https://www.cnblogs.com/ibgo/p/4639552.html
Copyright © 2020-2023  润新知