zoukankan      html  css  js  c++  java
  • 前端常用功能

    1、选择框 绑定事件,将所选择的值传给js脚本

    <td  id="TheadOdds0">

             <select onchange="SelectCompany(this.options[this.selectedIndex].value);"  id="oddsSelect"  name="oddsSelect"> 

                         <option value=o_0>平均欧赔</option>

                         <option value=o_9>威廉欧赔</option>

             </select>

    </td>

    2、javascript 异步请求函数

    <script>
            var xmlHttp ;
            function createXMLHttp(){
                if(window.XMLHttpRequest){
                    xmlHttp = new XMLHttpRequest() ;
                } else {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
                }
            }
    
            function checkUseridCallback(){
                if(xmlHttp.readyState == 4){
                    if(xmlHttp.status == 200){
                        var text = xmlHttp.responseText ; //接收返回的内容
                        
                        //获取从服务器端传过来的json数据,并使用JSON的parseJSON函数将文本转换为javascript对象  
                            var myobj = xmlhttp.responseText.parseJSON();   
                            //遍历javascript对象  
                            for (i = 0; i < myobj.programmers.length; i++) {   
                                    alert(myobj.programmers[i].lastName);  
                                }   
                        if(text == "true"){    // 用户id已经存在了
                            document.getElementById("msg").innerHTML = "用户ID重复,无法使用!" ;
                            flag = false ;
                        } else {
                            document.getElementById("msg").innerHTML = "此用户ID可以注册!" ;
                            alert(text);
                            flag = true ;
                        }
                    }
                }
            }

      //获取数据
      var jhdatas=hot3.getDataAtCol(1);  //设置需要传递的参数
      var datedatas=hot3.getDataAtCol(2); 

    //异步请求
    createXMLHttp() ;
    xmlHttp.open("POST","/mvcstudy/MainServlet",true) ; //http://127.0.0.1:8080/mvcstudy/excel5.html
                xmlHttp.onreadystatechange = checkUseridCallback ;
                xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //send函数有参数时,这个函数必须要调用
                xmlHttp.send("wellname="+jhdatas+"&datedata="+datedatas) ;  //传递参数
                document.getElementById("msg").innerHTML = "正在验证..." ;
            }
    </script>
     

     3、angularJs异步请求

     <div ng-app="realApp" ng-controller="realCtrl">
     <table width="99%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CECECE" onmouseover="changeto()" onmouseout="changeback()">
                                        <tr>
                                            <td width="6%" height="26" background="images/tab_14.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">选择</div></td>
                                            <td width="8%" height="18" background="images/tab_14.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">序号</div></td>
                                        </tr>
                                        <tr ng-repeat="x in names">
                                            <td height="18" bgcolor="#FFFFFF">
                                                <div align="center" class="STYLE1">
                                                    <input name="checkbox" type="checkbox" class="STYLE2" value="checkbox" />
                                                </div>
                                            </td>
                                            <td height="18" bgcolor="#FFFFFF" class="STYLE2"><div align="center" class="STYLE2 STYLE1">{{x.ID}}</div></td>
    
     </table>
    </div>

    <script>
      var app = angular.module('realApp', []);
      app.controller('realCtrl', function ($scope,$http) {
          $http({
              method: 'GET',
              url:'../../登陆/realApp.ashx'
          }).then(function successCallback(response) {
              $scope.names = response.data;
          }, function errorCallback(response) {
          // 请求失败执行代码
          });

      });

    </script>

  • 相关阅读:
    Day 09 函数
    Day 09 作业
    Day 08 可变与不可变对象/列表与字典内置方法
    Day 08 作业
    Day 07 字符串内置方法和爬虫基础3
    Day 06 流程控制和爬虫基础2
    Day 05 文本处理和爬虫基础1
    Day 04 作业
    Day 04 数据类型基础
    Day 03 Python 基础
  • 原文地址:https://www.cnblogs.com/crhdyl/p/5458949.html
Copyright © 2011-2022 走看看