jQuery Ajax加载表不是整页

时间:2016-07-01 17:33:20

标签: javascript jquery html ajax

固定

我的问题已经解决了。我的问题不是jQuery命令,因为我使用的模板与第一次加载页面和jsp页面中包含的表时相同。

解决方案

我的解决方案: 创建要在新页面加载名称ControlTable上调用的新模板。 仅使用表创建新的jsp文件。让它加载两个模板。 当触发jquery时,只通过控制器调用新模板 - >模板 - > jstl核心

背景

  1. 我有一个表单,我填写以创建网站用户登录信息。
  2. 当我将文本输入'plantNo'并从我的下拉列表中选择生产者时。我希望它在查询servlet以获取数据后加载一个表。
  3. 获取数据(我可以通过控制台查看)并检索列表。
  4. 问题

    问题是重新加载表格。它正在将整个网页重新加载到表中。我究竟做错了什么?我是jQuery和AJAX的新手。

    jQuery功能

    function getProdInfoData(variableIn){
    
    var plantnumber=document.myform.plantNo.value.trim();
    alert(plantnumber);
    
        $.post('Admin?page=createUser', {"plant_no": plantnumber },function(data){
             $('#pi').html(data).hide().slideDown('slow');
        });
    
    }
    

    Create_User.jsp

    <script type="text/javascript" src="/javascript/ajax_functions.js"></script>
    <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="/javascript/create_web_user.js"></script>
    <%@taglib uri="http://java.sun.com/jstl/core" prefix="c"%>  
    
    
    <style type="text/css">
    label{display: inline-block; width:120px; font-weight: bold;}
    input{width:250px; height: 25px; font-size: 18px; margin-right:25px;}
    select{width:250px; height: 25px; font-size: 18px; margin-right:25px;}
    #pi tr:nth-child(odd){
        background: #dae5f4;
    }
    #pi tr:nth-child(even){
        background: #ccccc;
    }
    
    <h2> Create Website User Login</h2>
    <!-- &nbsp is a non break line space  needed to offset for the asterisk in the required fields-->
    <div id="reserve_form"><form name="myform" method="post" action="/Admin?page=create_user_confirm" onsubmit="return validateform(this.form)" > 
    
    <div id="User_name"><p><label class="form"><sup style="color:red; font-style:bold, italic;">*</sup> User Name: </label><input type="text" class="textbox" id="uname" name="user_name" />
        <label class="form"><sup style="color:red; font-style:bold, italic;;">*</sup> First Name: </label><input type="text" class="textbox" id="fname" name="first_name" /></p></div>
    
    <div id="User_pword"><p><label class="form"><sup style="color:red; font-style:bold, italic;">*</sup> Password: </label><input type="text" class="textbox" id="pword" name="user_pword" />
        <label class="form"><sup style="color:red; font-style:bold, italic;">*</sup> Last Name: </label><input type="text" class="textbox" id="lname" name="last_name" /></p></div>
    
    <div id="Plant_no"><p><label class="form"><sup style="color:red; font-style:bold, italic;">*</sup> Plant or Prod #: </label><input type="text" class="textbox" id="plantNo" name="plant_no" />
        <label class="form">&nbsp; Farm Name: </label><input type="text" class="textbox" id="farnname" name="farm_name" /></p></div>
    
    
    
    
    <div id="Acct_type"><p><label class="form"><sup style="color:red; font-style:bold, italic;">*</sup> Account Type: </label>
                         <select name="acct_type" id="acct_type_select"  onchange = "ShowHideDiv2(this.value)"  style="height: 25px;">
                            <option value=""> </option>
                            <option value=5>Producer</option>
                            <option value=15>Field Man</option>
                            <option value=2>Admin</option>
                         </select>
    
                         <label class="form">&nbsp; Email Address: </label><input type="text" class="textbox" id="emailaddress" name="email_address" /></p></div>
    
                         <div id="cntrl"><p><label class="form"><sup style="color:red; font-style:bold, italic;">*</sup> Control #: </label><input type="text" class="textbox" id="cntrlno" name="cntrl_no" />
                         </div>
    
    <table id="pi" style="display: block" >
    <tr id="header">
        <td>Control Number</td>
        <td>Producer ID</td>
        <td>Producer Name</td>
        <td>Producer Name 2</td>
        <td>Producer Name 3</td>
        <td>Plant</td>
        <td>Coop</td>
        <td>Federal Order</td>
    </tr>
        <c:forEach items="${prod_ctl_sel}" var="pt" varStatus="i">
            <c:set var="background_color" value="#fff"/>
            <c:set var="border_color" value="black"/>
            <c:set var="v" value=""/>
        <tr class="producer_data" id="<c:out value="${i.count}_row"/>" >
            <td style="text-align:center;"><c:out value="${pt.prodCtlNum}"/></div></td>
            <td><c:out value="${pt.prodIdNum}"/></td>
            <td><c:out value="${pt.prodName1}"/></td>
            <td><c:out value="${pt.prodName2}"/></td>
            <td><c:out value="${pt.prodName3}"/></td>       
            <td><c:out value="${pt.prodPlant}"/></td>
            <td><c:out value="${pt.prodCoop}"/></td>
            <td><c:out value="${pt.prodOrder}"/></td> 
        </tr>
        </c:forEach>
    

    最后 servlet / controller

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    //_LOTS_OF_CODE_IN_BETWEEN
    if(request.getParameter("page")!=null && !request.getParameter("page").equals("")){ 
                if(request.getParameter("page").equalsIgnoreCase("createUser")){ 
                    /* NEW CODE to create  user */
    
                    String updateID = info.getUserid();
                    String prod_number_in = request.getParameter("plant_no");   
                    AdminFunctions af = new AdminFunctions();
                    ArrayList prod_control_select = new ArrayList();
                    System.out.println("prond_num_in"+ prod_number_in);
                    if(prod_number_in != null || prod_number_in != ""){
                        prod_control_select = af.getProdCtlNum(prod_number_in);
                        request.setAttribute("prod_ctl_sel",prod_control_select);
                     }
    

    由于图片值1k字,这里是屏幕抓取。

    Screen Grab of the webpage after (removed some database info)

2 个答案:

答案 0 :(得分:0)

此代码可能对您的问题有所帮助。

function getProdInfoData(variableIn){

var plantnumber=document.myform.plantNo.value.trim();
alert(plantnumber);

$.post('Admin?page=createUser', {"plant_no": plantnumber },function(data){
     $('#pi').html('').append(data).hide().slideDown('slow');
});
}

答案 1 :(得分:0)

问题出在您的ajax来电中,实际上您通过发布方法发送数据,但您在parameter中发送url {1}}这也是使用Get方法时唯一可行的,url Admin?page=createUser错误, POST 方法应该很简单,< / p>

  

如果您通过 POST 方法发送数据,则应将参数与对象一起发送。

所以请按照下面的方式制作你的ajax请求

$.post('yourPage.php/Admin', {"page":"createuser","plant_no": plantnumber },function(data){
     $('#pi').html(data).hide().slideDown('slow');
});
  

如果您通过 GET 方法发送数据,则可以在网址中发送page个参数或使用的对象

 $.get('yourPage.php/Admin?plant_no='.plantnumber,function(data){
     $('#pi').html(data).hide().slideDown('slow');
});