当前位置: 代码迷 >> J2EE >> ajax无刷新页面获取,该如何处理
  详细解决方案

ajax无刷新页面获取,该如何处理

热度:34   发布时间:2016-04-22 02:16:06.0
ajax无刷新页面获取
内容如下:
<form>
<table>
<tr>
  <td>编号:</td>
<td><input type='text' name='bookId' id='bookId'/>
  <input type='button' value='提取'onclick='return check();'/>
  </td>
</tr>
<tr>
  <td>价格:</td><td><input type='text' id='bookPrice' value=''/></td>
</tr>
</table>
</form>

function check(){


}
单击 提取按钮时通过check () 方法调用 数据库 把 价格填到该页面价格的文本框中?

------解决方案--------------------
页面:
HTML code
<html> <head> <script src="jquery.js"></script><script>(function($) {    $.fn.formLoad = function(p) {        var form = $(this);                var opts = {            url : 'data.json',            onSuccess : function(data){                form.find('input[type=text]').each(function() {                    var id = $(this).attr('id') || $(this).attr('name');                    $(this).val(data[id] || '');                });            }        }                $.extend(opts,p);        $.post(opts.url,opts.onSuccess,'json');    }})(jQuery);$(document).ready(function(){    $('#btn_getData').click(function() {        $('form').formLoad({ url : 'data.json' });    });});</script></head> <body> <form><table><tr>  <td>编号:</td><td><input type='text' name='bookId' id='bookId'/>  <input type='button' value='提取' id="btn_getData"/>  </td></tr><tr>  <td>价格:</td><td><input type='text' id='bookPrice' value=''/></td></tr></table></form></body> </html>
------解决方案--------------------
Java code
<script language="javascript">      function model_vote(modelId){        var action = "/topics/2011guangzhou/modelVote.auto?modelId="+modelId;        $.ajax({         type:"post",         url:action,         dataType:"text",         async:"false",         error: function(){                   alert('操作失败,数据错误');                },         success:function(count){                if(count!=null && count.length<10){                    var input = $("b[id='voteModel_"+modelId+"']");                     $.each(input,function(entryIndex,entry){                            entry.innerHTML=count+"票";                     });                }         }      });    }   </script>
------解决方案--------------------
<%
response.setHeader("Pragma", "No-cache"); 
response.setDateHeader("Expires", 0); 
response.setHeader("Cache-Control", "no-cache");
%>

JScript code
<script type="text/javascript">        var xmlHttp;    function push(url) {        var urlReq = url;        sendRequest(urlReq);    }    //创建XMLHttpRequest对象           function createXMLHttpRequest() {        if (window.XMLHttpRequest) { //Mozilla 浏览器            XMLHttpReq = new XMLHttpRequest();        } else if (window.ActiveXObject) { // IE浏览器            try {                XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");            } catch (e) {                try {                    XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");                } catch (e) {                }            }        }    }    //发送请求函数    function sendRequest(url) {        createXMLHttpRequest();        XMLHttpReq.open("GET", url, true);        XMLHttpReq.onreadystatechange = processResponse;//指定响应函数        XMLHttpReq.send(null); // 发送请求    }    //处理返回信息函数    function processResponse() {        if (XMLHttpReq.readyState == 4) { // 判断对象状态            if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息                var result = XMLHttpReq.responseText;                document.getElementById("main").innerHTML = result;            } else { //页面不正常                window.alert("您所请求的页面有异常。");            }        }    }           </script>
  相关解决方案