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

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

创建一个页面说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 3

试试这个：

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

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

Answer 4

嘿，您可以使用Ajax表单提交，并在提交后清除字段。

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

4 个答案: