Question

我正在使用jquery-load-json http://code.google.com/p/jquery-load-json/wiki/WorkingWithFormElements插件用json数据填充html表单字段。

我试图将json加载到表单中，如示例所示，但是当我尝试这样做时，我得到的数据没有定义。将数据从外部文件加载到表单中的正确方法是什么？

//外部json文件data.json

data = {
            "ID":17,
            "Name":"Emkay Entertainments",
            "Address":"Nobel House, Regent Centre",
            "Town":"Lothian",
            "Contact":"Phone"
}

// HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Filling the form with the single JSON object

JQuery loadJSON plugin can be used for filling the form elements.</title>
</head>

<body>


<form name="form_simple" id="form-simple" action="details.html" method="get">

    <input type="hidden" id="ID" name="ID" />

    <label for="Name">Name</label>

    <input name="Name" id="Name" type="text" />

    <label for="Address">Address</label>

    <textarea name="Address" id="Address" rows="5" cols="20"></textarea>

    <label for="Country">Country</label>
    <select name="Country" multiple="multiple">
        <option value="">-</option>
        <option value="UK">United Kingdom</option>
        <option value="SRB">Serbia</option>
        <option value="USA">United States of America</option>
        <option value="FRA">France</option> 
    </select>

    <label for="IsFeatured">Is Featured</label>
    <input name="IsFeatured" id="IsFeatured" type="checkbox" value="true"/>

    <label for="Town">Town</label>
    <select name="Town" id="Town">
        <option value="" selected="selected">-</option>
        <option value="London">London City</option>
        <option value="Liverpool">Liverpool City</option>
        <option value="Lothian">Lothian City</option>
        <option value="Newcastle">Newcastle City</option>
        <option value="Buckinghamshire">Buckinghamshire City</option>
        <option value="Essex">Essex City</option> 
    </select>

    <label for="Contact">Contact</label>
        <input name="Contact" type="radio" value="Email"/> Email
        <input name="Contact" type="radio" value="Phone" /> Phone
        <input name="Contact" type="radio" value="Post" /> Post

    <input type="submit" value="Details" class="submit-button" />
</form>


<!-- Load jQuery and the minified plugin -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
 <script type="text/javascript" src="js/jquery.validate.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
 <script language="javascript" type="text/javascript">

        $(document).ready(function () {
         //   var id = window.location.href.match("(ID=|id=|/)[0-9]+")[0].match("[0-9]+");
            $('form').loadJSON(data);
        });
    </script>
</body>
</html>

如何使用jquery-load-json插件加载外部JSON文件

0 个答案: