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 () 方法调用 数据库 把 价格填到该页面价格的文本框中？

解决方案 »

  1.   

    你可以使用ajaxanywhere，局部刷新文本框区域就OK了！~
      

  2.   

    你可以看看ajaxanywhere的例子，就是用aa:zone 定义一个区域，当提交数据后只会刷新该区域的内容而页面其他内容不会变，应该符合需求
      

  3.   

    http://www.cnblogs.com/heekui/archive/2006/09/19/508209.html
    这有个AJAX的例子，在xmlHttp.readyState == 4里面，给bookPrice赋值
      

  4.   

    页面:<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> 假定服务器返回的数据(data.json):{
    "bookId" : "this is bookId",
    "bookPrice" : "this is bookPrice"
    }
      

  5.   


    <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>
                <h4>
                     ${model.modelName}
                    <b id="voteModel_${model.modelId}">${model.modelClickCount}票</b>
                    <input type="button" onclick="javascript:model_vote(${model.modelId})" value="我喜欢" />
                    </h4>这段代码希望对你有帮助
      

  6.   

    上面这段代码，是一段页面投票的ajax代码，希望对楼主有帮助。
      

  7.   

    5楼兄弟的代码对你有很大的帮助，可以用jquery来完成数据的查询与赋值
      

  8.   

    楼主的意思是···可以搜索写ajax的例子看下，或者看下jquery的ajax，很容易学会的，没必要问吧，就算给你的也都是···呵呵，掌握好的学习方法比什么都重要
      

  9.   

    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+"票";
                         });
                    }
             }
          });
      

  10.   

    <%
    response.setHeader("Pragma", "No-cache"); 
    response.setDateHeader("Expires", 0); 
    response.setHeader("Cache-Control", "no-cache");
    %>
    <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>如上面的代码，是我写的一个例子，是可以正常实现Ajax的无页面刷新的。
    有几个注意的，最上面的<% %>是禁止Jsp页面缓存还有就是这段JS代码,如果我写在一个JS文件里，然后Jsp调用的话,貌似会有些小问题。好了，互相研究，呵呵  祝楼主能解决问题!