jQuery Ajax加載表不是整頁

Question

固定

我的問題解決了。 我的問題不是jQuery命令，因為我使用的模板與第一次加載頁面和jsp頁面中包含的表時相同。

解

我的解決方案：創建一個新模板，在新頁面加載名稱ControlTable上調用。 僅使用表創建新的jsp文件。 讓它加載兩個模板。 當觸發jquery時，只通過控制器調用新模板 - > template - > jstl core

背景

1. 我有一個表單，我填寫以創建網站用戶登錄信息。
2. 當我將文本輸入'plantNo'並從我的下拉列表中選擇生產者。 我希望它在查詢servlet以獲取數據后加載一個表。
3. 它正在獲取數據（我可以通過控制台查看）並檢索列表。

問題

問題是重新加載表格。 它正在將整個網頁重新加載到表中。 我究竟做錯了什么？ 我是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字，這里是屏幕抓取。

屏幕抓取后的網頁（刪除一些數據庫信息）

Answer 1

此代碼可能對您的問題有所幫助。

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');
});
}

Answer 2

問題出在你的ajax調用中，實際上你是通過 POST方法發送數據但是你也在你的url中發送一個parameter ，這是唯一可能在使用Get方法時，你的url Admin?page=createUser是錯誤的應該是簡單的POST方法，

如果您通過POST方法發送數據，則應將參數與對象一起發送。

所以如下所示制作你的ajax請求

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

如果您通過GET方法發送數據，則可以在URL中或使用對象發送page參數

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