重新加载 div 而不使用 ajax/jquery 重新加载整个页面

Question

我正在做一个项目，当用户完成同一页面中的表单时需要刷新。代码如下：

page1.jsp

 <div id="codeRefer">
    <input type="" type="text" name="numcode" id="numcode" value="42988715">
    <script language="javascript">
        var a = Math.ceil(Math.random() * 9) + '';
        var b = Math.ceil(Math.random() * 9) + '';
        var c = Math.ceil(Math.random() * 9) + '';
        var d = Math.ceil(Math.random() * 9) + '';
        var e = Math.ceil(Math.random() * 9) + '';
        var f = Math.ceil(Math.random() * 9) + '';
        var g = Math.ceil(Math.random() * 9) + '';
        var h = Math.ceil(Math.random() * 9) + '';
        var code = a + b + c + d + e + f + g + h;
        document.getElementById("numcode").value = code;

        function ValidCaptcha() {
            var str1 = removeSpaces(document.getElementById('numcode').value);
            var str2 = removeSpaces(document.getElementById('txtInput').value);
            if (str1 == str2) {
                return true;
                alert(str1);
            } else {
                return false;
            }
        }

        function removeSpaces(string) {
            return string.split(' ').join('');
        }
    </script>
</div>
<input type="button" value="REFRESH" onClick="javascript:refer()">
<script language="javascript">
    function refer() {
        $('#codeRefer').load(window.location.href + '#codeRefer');
    }
</script>

我得到的是，当我单击刷新时，文本框的值会被刷新，但是，我在第一个刷新按钮的底部得到另一个相同的“刷新”按钮。 我不知道为什么会出现另一个按钮。谢谢各位！

I think there is a bug in my code.
Which keeps repeating the whole content whenever I press the REFRESH button.
HELP me with this guys GURU'S.

Answer 1

您可以尝试将所有脚本移出#codeRefer，并在加载html 之前调用empty()。

像这样：

$('#codeRefer').empty().load(window.location.href + '#codeRefer');

编辑：如果您只想刷新 div，我建议您将要加载的内容作为模板放入，然后从该模板加载 html。示例：

<script type="text/template" id="refresh-template">
  <input type="" type="text" name="numcode" id="numcode" value="42988715">
</script>

以及您的处理程序中的 javascript 随机数生成：

function refer() {
    $('#codeRefer').empty().load(window.location.href + '#refresh-template');
    // OR if you are just loading from the same page. just use .html() might be better
    // $('#codeRefer').html($('#refresh-template').html());

    var a = Math.ceil(Math.random() * 9) + '';
    var b = Math.ceil(Math.random() * 9) + '';
    var c = Math.ceil(Math.random() * 9) + '';
    var d = Math.ceil(Math.random() * 9) + '';
    var e = Math.ceil(Math.random() * 9) + '';
    var f = Math.ceil(Math.random() * 9) + '';
    var g = Math.ceil(Math.random() * 9) + '';
    var h = Math.ceil(Math.random() * 9) + '';
    var code = a + b + c + d + e + f + g + h;
    document.getElementById("numcode").value = code;

}

http://jsfiddle.net/L7wgU/1/

Answer 2

试试这个：

function refer(ev) {
    $(ev.target).hide(); //hide the input button if want remove try .remove()
    var $currentCodeRefer = $("#codeRefer");
    $currentCodeRefer.ajax({
        url: window.location.href
    })
    .success(function(html) {
        var $newCodeRefer = $(html).find("#codeRefer");
        $newCodeRefer.empty().html($currentCodeRefer.html());
    });

//To receive the event data maybe need something like this:
$("buttonIDorClass").on("click", function(ev){refer(ev)});

不是更好的方法，但你需要，我建议有另一个像之前答案一样的 ajax，或者有一个 javascript 渲染并发送 json 数据并在客户端渲染。

Answer 3

这只能通过这种方式实现：

创建一个 pgae 说 ajax.html

<!-- ajax.html -->
<input type="" type="text" name="numcode" id="numcode" value="42988715">
<script language="javascript">
    var a = Math.ceil(Math.random() * 9) + '';
    var b = Math.ceil(Math.random() * 9) + '';
    var c = Math.ceil(Math.random() * 9) + '';
    var d = Math.ceil(Math.random() * 9) + '';
    var e = Math.ceil(Math.random() * 9) + '';
    var f = Math.ceil(Math.random() * 9) + '';
    var g = Math.ceil(Math.random() * 9) + '';
    var h = Math.ceil(Math.random() * 9) + '';
    var code = a + b + c + d + e + f + g + h;
    document.getElementById("numcode").value = code;

    function ValidCaptcha() {
        var str1 = removeSpaces(document.getElementById('numcode').value);
        var str2 = removeSpaces(document.getElementById('txtInput').value);
        if (str1 == str2) {
            return true;
            alert(str1);
        } else {
            return false;
        }
    }

    function removeSpaces(string) {
        return string.split(' ').join('');
    }
</script>

然后在主 html 文件中使用此代码，例如 index.html

<div id="codeRefer">

</div>
<input type="button" value="REFRESH" onclick="refer()">
<script language="javascript">
    function refer() {
        $('#codeRefer').load('ajax.html#codeRefer');
    }
    refer();
</script>

Answer 4

您可以使用 Ajax 表单提交和提交后清除字段。