Question

我会尽可能地在这里解释我的情况。由于这是一个与工作相关的问题，我没有太多的代码可以展示。

我正在使用jQuery对话框。场景是，我得到了一些名字和名单的名单。每个名字前都有一个引导下拉列表。更具体地说，我正在尝试创建一个编辑窗口，用户可以通过该窗口编辑记录。名称来自从基于PHP的后端获取的JSON。

我们都知道我们可以轻松获取数据和使用$.get操纵它吧？在同一个块中，我为此编写了jQuery UI Dialog的代码，

//document.ready block
$.get( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
 $("#btn-edit").on('click', function(){
    $( "#dialog" ).dialog({
      open: function(){

         $('#some_textbox').val(data.name); //textbox is in the dialog
      }
    });
 });
});

<div id="dialog" title="Basic dialog">
 <p>This is the default dialog which is useful for displaying information. The dialog  window can be moved, resized and closed with the 'x' icon.</p>
</div>

问题是文本框的值未设置为data.name，而我可以在该块中完美console.log(data);。我也可以像这样设置一些随机字符串，$('#some_textbox').val("some random string");。

为什么？

所以我的导师又称主管告诉我，它必须对绑定做些什么。这是真的吗？我怎么可能解决这个问题？

Answer 1

问题是你得到的字符串可能是有效的json，但尚未解析。您可以解析结果，但更容易更改$.get：

$.getJSON( "ajax/test.html", function( data ) {

Answer 2

这是JSON文件的示例：（producten.json）

[
{"model":"SAMSUNG", "price":"1000", "omschrijving":"Dit is een groot teveetje", "scherm":"1000", "label":"A++", "wifi":"Ja, ingebouwd"},
{"model":"SONY", "price":"2000", "omschrijving":"Dit is een nog groter teveetje", "scherm":"2000", "label":"A+", "wifi":"Ja, met dongle (optie)"}
]

这是你从中获取东西并在html中输入的方式：

$(document).ready(function() {
// get JSON data from producten.json
console.log("Jquery triggered");
$.getJSON('producten.json', function(data) {
    console.log("getJSON triggered");
    var i = 0;
    var bool = true;
    while(bool) {
        console.log(data[i].model);
    var model = data[i].model;
    var price = data[i].price;
    var omschrijving = data[i].omschrijving;
    var scherm = data[i].scherm;
    var label = data[i].label;
    var wifi = data[i].wifi;
    i++;
            //add artikel by JSON
        var artikel = "<article><h3>" + model + "</h3><ul><li><img alt='" + model + "' src='images/tv-icon.png'><span>" + price + " EUR</span></li><li>" + omschrijving + "</li><li><ul class='product-details'><li class='diagonal'>Scherm diagonaal: <span>" + scherm + " cm</span></li><li class='energy-label'>Energie label: <span>" + label + "</span></li><li class='wi-fi'>Wi-Fi <span>" + wifi + "</span></li></ul></li></ul></article>";
        $("section:eq(1)").append(artikel);
        console.log("Article added to page by JSON");
    }
    console.log("data JSON obtained");
});

抱歉蹩脚的while循环，几乎是睡觉时间hehe ^^

在jQuery UI对话框中将数据从JSON获取到TextBoxes

2 个答案: