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

Posted 2023-05-09

【中文标题】单击表单中的按钮后，通过 Ajax 附加 html 页面

【英文标题】：After click on button in Form append html page by Ajax

【发布时间】：2016-06-16 13:56:20

【问题描述】：

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

提示屏幕截图：

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

点击检查按钮后：

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。并附加页面，但页面布局不正确。给我一些想法来实现这个解决方案。

【问题讨论】：

它应该附加在表单中吧？

它是附加的。但是布局不是正确的方式..

如果你能提供一个相同的小提琴就好了..

不可能。但是你有任何想法附加页面然后让我知道。单击表单按钮后，您可以为附加页面创建 JSfiddle。

【参考方案1】：

尝试更改此行

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

到这里

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

【讨论】：

创建一个 jsfiddle 非常适合我们通过您的代码进行调试