单击表单中的按钮后，通过 Ajax 附加 html 页面

Question

我正在使用 Jquery 移动框架，也是 jquery 移动中的新功能。我想通过 Ajax 附加一个 html 页面。首先，我在表单中使用一个按钮（检查），但是每当单击此按钮时，页面就会附加，但布局会损坏。我不知道如何在 jquery mobile 中通过 ajax 附加 HTML 页面。

提示屏幕截图：

1. 点击检查按钮之前的这个页面：
   
   

2. 点击检查按钮后：
   
   

HTML 代码：

 <form id="checkPinCode1" method="get" data-uri="<c:url value="/pincode-available/${product.productId}/${product.productOfCityId}"/>" data-ajax="false"> 
        <div  style="margin-bottom: 20px; width: 80%;">
            <input name="pinCode" type="number"   class="form-control pinCode" placeholder=" Enter pincode here..">   
        </div>
        <div  style="margin-bottom: 20px; width:40%;">
            <button class="btn btn-primary" type="submit" value="Check">Check</button>
        </div>
</form>


<div id="showPincodeAvailablity"> 
<%--APPEND PAGE HERE--%>
</div>

AJAX 代码：

 $.ajax({
                    type: 'get',
                    url: url,
                    data: {pincode: pincode},
                    success: function (response) {
                        if (response.success === "true") {  
                            $("#showPincodeAvailablity").html(response.html);    
                        }                       
                    },
                    error: function (response) {                      
                    },
                    complete: function (response) {
                    }
                });

JAVA 代码：

   @RequestMapping(value = "/pincode-available/{productId}/{productOfCityId}", method = {RequestMethod.GET})
        @ResponseBody
    <%--- CODE LINE 1--%>
 <%--- CODE LINE 2--%>
 <%--- CODE LINE .....--%>
     resp.put("success", "true");
                resp.put("html", html);

            }

首先我输入 pin 码并单击检查按钮然后检查按钮控制转到控制器并进入 ajax 然后页面附加 id = showPincodeAvailablity。并附加页面，但页面布局不正确。给我一些想法来实现这个解决方案。

Answer 1

尝试更改此行

$("#showPincodeAvailablity").html(response.html); 

到这里

$("#showPincodeAvailablity").html(response.html).enhanceWithin();