0

我有两个页面，第一个是 ask.jsp，第二个是 get.jsp。在询问 .jsp 时有一个按钮...按下时通过 ajax 调用 get.jsp，我试图从中返回一个滑块页面...但看不到它...但是如果我从该页面发送一些短信，它会显示在 ask.jso 上，那么如何通过第二页返回滑块？

问.jsp

    <%@ page language="java" contentType="text/html; charset=windows-1256"
        pageEncoding="windows-1256"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
    <script>
    function update()
    {

        var xmlhttp;    

        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
$( "#slider" ).slider();
            document.getElementById("refresh").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","get.jsp");
        xmlhttp.send();

    }
    </script>
    </head>
    <body>
    <input type="button" id="1" value="1" onClick="update();"/>

    <%
    int value=1;
    %>
    <div id="refresh">
    <%=value %>
    </div>

    </body>
    </html>

获取.jsp

$(function() {
$( "#slider" ).slider();
});
</script>
<p>
heyyyyyyyyyy
</p>
<p id="slider">
</p>

演示：Plunker

4

3 回答 3

1

在 AJAX 调用中的成功函数中，重新调用显示滑块的函数。

我没有像您在代码中那样使用 AJAX，但可以肯定的是，那里有一个成功函数

（也许你的成功部分是：

if (xmlhttp.readyState==4 && xmlhttp.status==200)) {}

)

注意：据我所知，AJAX 使用 jquery ajax 函数更好，例如：

$.ajax({
                    type: "GET",
                    url: "url.php",
                    dataType: 'html',
                    data: ({ action: 'youraction', parameters... }),
                    success: function(data){

                          $( "#slider" ).slider(); 
                          // other AJAX actions.
                    },
                    error: function(data)  
                    {  

                    }  


                });

祝你好运。

于 2013-04-10T15:21:48.273 回答
1

尝试重新组织get.php

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<p>
    heyyyyyyyyyy
</p>
<p id="slider">
</p>
<script>
    $(function() {
        $( "#slider" ).slider();
    });
</script>

将脚本移动到底部

还使用.load()将远程 html 加载到元素

function update(){
    $('#refresh').load('get.jsp')
}

看起来问题是插入的脚本元素innerHTML 不会被执行

于 2013-04-10T15:34:50.017 回答
1

我觉得你应该：

  • 1 从 get.jsp 中删除所有链接标签和脚本标签。仅保留必要的 HTML 标记（在您的情况下为 : <p id="slider"></p>）。我们当然应该在主页中调用这些库。

  • 2 在您的 AJAX 调用中，在 AJAX 完成返回所需的人员后，再次调用 jquery 操作负责显示滑块

    在您的情况下，此操作是$( "#slider" ).slider();. 所以在里面if (xmlhttp.readyState==4 && xmlhttp.status==200)或者之后调用它xmlhttp.send();。这里的想法是重新调用它，以便在 AJAX 更新 DOM 后触发它。

  • 3 如果所有这些解决方案都不起作用，请使用我的第一个答案中描述的 jquery new ajax 方式。

于 2013-04-10T15:48:29.210 回答