如何从服务器获取和设置表单的默认值

时间:2015-02-09 04:27:03

标签: javascript jquery html

我有一个简单的HTML表单:

<div id="dialog-form-manageadvsertiser" title="Dialog title" style="display: none;">
    <div class="col-xs-12">
        <div class="form-group">
            <label for="inputUserId" class="col-xs-3 control-label">Account number</label>
            <div class="col-xs-9">
                <input data-val="true" data-val-number="The field must be a number." id="User_Id" name="User_Id" value="" />
            </div>
        </div>
    </div>
    <div class="col-xs-12">
        <div class="form-group">
            <label for="inputAdvName" class="col-xs-3 control-label">Advertiser name</label>
            <div class="col-xs-9">
                <input data-val="true" data-val-number="" id="AdvName" name="AdvName" value="" />
            </div>
        </div>
    </div>
</div>

我想为某些字段设置默认值,这些值是动态的,因此我有一个PHP脚本返回这些值的json表示:

{
    "User_Id": "12345"
}

如何在加载时将此值分配给表单的UserID字段?

我正在使用jquery框架。 我希望某种机制在for加载时触发对服务器的POST请求,然后根据字段ID将响应中的值分配给表单。

我尝试在谷歌上进行研究,但未找到相关信息。

谢谢!

1 个答案:

答案 0 :(得分:1)

因此,您希望进行ajax调用并使用默认值填充字段,您需要$.getJSON才能进行调用

//Function for get the data and assign default value
function getValues() {
    //get json from server
        $.getJSON( "ajax/test.json", function( data ) {
            $.each( data, function( key, val ) {
              //Am assuming your input name matches with form fields
              $( "input[name='"+ key +"']" ).val(val);
        });
    });
}

//jQuery document ready
$(function(){
    //on page load 
    getValues();

    //This will trigger on change of User_id
    $("#User_Id").on('change', getValues);
});

并在PHP中,确保返回带有标题的有效json

header('Content-type: application/json');
echo json_encode($data_array);

<强> Here is a working Plunk

了解$.getJSON see docs

的更多信息