jQuery使用load()和param

时间:2014-04-14 10:25:01

标签: jquery forms get

我想在html中做一些技巧。 我希望我可以使用jQuery在一个块中加载一个html(比如<span></span>)。 在目标html中,我需要url中的参数来做某事。 对于a.html是主页面,b.html是另一个嵌入a.html块的页面, 在a.html中,有一个这样的块:

<span id="rp"></span>

并在其'javascript中,它做了这件事(我问过标题的问题):

 var param="x="+1+"&y="+2;
 $("#rp").load("b.html?"+param);

这是所有主要页面,并在b.html,

它通过url中的params来填充b.html形式。

在b.html中,有一个表单:

<form id="myForm" action="192.168.1.xxx/goal.html" method="post">
    <input type="hidden" id="xs" name="x" />
    <input type="hidden" id="ys" name="y" />
    <input type="submit" value="test" />
</form>

(goal.html在另一个域名中,所以我不能在主页面中使用ajax。这就是为什么我想出这种方法使用方法'POST'将数据发送到goal.html)

和b.html的javascript是:

window.onload=function(){
    function QueryStr(str) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        var val="";
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if (pair[0]==str) {
                val=pair[1];
            }
        } 
        return val;
    }
    //var test=setInterval(fillForm,100);
    fillForm();
    function fillForm(){
        if(isFilled()){
            document.getElementById("xs").value=QueryStr("x");
            document.getElementById("ys").value=QueryStr("y");
            //clearInterval(test);
            //document.getElementById("myForm").submit();
        }
    }
    function isFilled(){
        if(QueryStr("x")!=""&&QueryStr("y")!="") return true;
        return false;
    }
}

我尝试使用计时器(setInterval)来确保数据可以在加载后填写在表单中,但结果并没有不同。

b.html的结果应该分别填充input type=hidden和params,

当我在网址中使用带有params的b.html时,它很顺利,如果我使用a.html作为javascript(jQuery load()),b.html的结果将不会在url中使用params。< / p>

即,如果操作正确,输入字段应为:

<input type="hidden" id="xs" name="x" value="1">
<input type="hidden" id="ys" name="y" value="2">

但是在a.html的块中,该字段是

<input type="hidden" id="xs" name="x" >
<input type="hidden" id="ys" name="y" >

那么,我是否使用错误的jQuery方式?

任何指示或建议都会欣赏!

1 个答案:

答案 0 :(得分:1)

试试这个(模式)

  $(function() { 
        $("#rp")
        .load("b.html", function(data, textStatus) {
            if (textStatus === "success") {
            $(this).find("#xs")
            .prop("value", "1")
            .siblings("#ys")
            .prop("value", "2")
            };
        });
    });

jsfiddle http://jsfiddle.net/guest271314/aEQgD/