提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

jqueryajax局部无刷新更新数据的实现案例

案例数据 实现 更新 刷新 局部 JqueryAJAX
2023-06-13 09:15:17 时间

要更新的页面

复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>

   <scriptsrc="js/jquery.js"type="text/javascript"></script>

</head>
<body>
   <selectid="lucky1"onchange="returnduoduo();">
       <optionvalue="1">第一期</option>
       <optionvalue="2">第二期</option>
   </select>
   <divid="duoduo">
       你好</div>
      <inputtype="text"id="duo" />
</body>

<scripttype="text/javascript">

   functionduoduo(){
       $.ajax({
           type:"post",//可选get
           url:"ajax.aspx",//这里是接收数据的程序
           data:"data="+$("#lucky1").val(),//传给PHP的数据，多个参数用&连接
           dataType:"html",//服务器返回的数据类型可选XML,Jsonjsonpscripthtmltext等
           success:function(msg){
               //这里是ajax提交成功后，程序返回的数据处理函数。msg是返回的数据，数据类型在dataType参数里定义！
               document.getElementByIdx_x_x("duoduo").innerHTML=msg;
               //$("#duoduo").innerHTML=msg;
           },
           error:function(){
               alert("对不起失败了");
           }
       })
   }

</script>

</html>


操作页面
复制代码代码如下:

 protectedvoidPage_Load(objectsender,EventArgse)
   {
       if(Request.Params["data"].ToString().Equals("1"))
       {
           Response.Write("<ahref=\"http://www.baidu.com\">第一期</a>");
       }
       elseif(Request.Params["data"].ToString().Equals("2"))
       {
           Response.Write("<ahref=\"http://www.baidu.com\">第2期</a>");
       }
   }

相关文章