如何将json数组附加到value属性

时间:2015-06-26 09:09:56

标签: javascript json ajax

我的视图中有一个搜索框。

img

当我在这里搜索产品时,它将使用ajax检索(单个)产品

我的ajax代码是

<script>
$(function() {
  $("#update_prod").click(function(event) {
    event.preventDefault();
    var head = $("#update_product").val();
    $.ajax({
      dataType: 'json',
      type: "post",
      url: "<?php echo base_url(); ?>index.php/admin/update_product",
      data: {
        product: head
      },
      success: function(data) {

      }
    });
  });
});
</script>

所以在控制器

public function update_product() {
  $product = $_POST['product'];
  $query = $this - > db - > query("Select  * From product Where  title Like '%$product%' and online=1");
  $result = $query - > result_array();
  echo json_encode($result);
}

并在我的控制台中恢复数据

[{
  "id": "99",
  "brand_id": "8",
  "category_id": "1",
  "mark": "0",
  "title": "Corsair Memory - 1GB 533MHz DDR2 Desktop Memory(VS1GB533D2 ",
  " model ": " Corsair Memory - 1 GB ",
  " sub ": " Corsair Memory - 1 GB DDR2 Desktop Memory ",
  "price": "3250",
  "price_update": "1",
  "description": "",
  "overview": "1",
  "offer": "0",
  "stock": "0",
  "online": "1",
  "other": "0",
  "video": "0",
  "valid": "Price Valid 2 Weeks Only"
}]
  

我的问题如何检索数据附加到以下输入标记的值

<input type="text" class="form-control" name="new_title" value="">//title should come here
<input type="number" class="form-control" name="new_price" value="">//price should come here
<select class="form-control" name="new_price_update">//if price_update==1 then Yes should be select, else No will be select
  <option value="1">Yes</option>
  <option value="0">No</option>
</select>
  

注意:我检查所有堆栈问题但无法找到更好的解决方案

4 个答案:

答案 0 :(得分:1)

使用$.parseJSON 你在阿贾克斯获得成功data。所以第一步是使用parseJSON解析它 然后在输入标签后添加一些带有单独标识符的div。 然后像追随一样追加它。

<script>
    $(function(){
        $( "#update_prod" ).click(function(event)
        {
            event.preventDefault();
            var head= $("#update_product").val();
            $.ajax(
                {
                    dataType: 'json',
                    type:"post",
                    url: "<?php echo base_url(); ?>index.php/admin/update_product",
                    data:{ product:head},
                    success:function(data)
                    {
                     var result= jQuery.parseJSON ( data );
                     $('#title').html(result.title);
                     $('#price').html(result.price);
                     //check condition for select box
                     if(result.price_update==1)
                     $('select').val('Yes');
                     else
                     $('#select').val('No');

                    }
                });
        });
    });
</script>

你的HTML现在

    <input type="text" class="form-control" name="new_title" value="">
<div id='title'></div>
    <input type="number" class="form-control" name="new_price" value="">
 <div id='price'></div>
    <select class="form-control" id='select' name="new_price_update"> 
        <option value="1">Yes</option>
        <option value="0">No</option>
    </select>

希望它对你有用,快乐编码:)

答案 1 :(得分:0)

通过

替换update_product()最后一行foo()[0]
echo json_encode($result);

在ajax

的成功功能中添加此行
$this->output->set_content_type('application/json')->set_output(json_encode($result));

答案 2 :(得分:0)

ajax success方法中,使用JSON.parse检索结果,如下所示:

$.ajax({
    ...
    success: function(data) {

        //This line turns the JSON string echoed from your PHP into a JS object
        var json_obj = JSON.parse(data);

        //since your PHP created an array, we iterate through the object
        $.each(json_obj, function(index, result){
            console.log(result.title);
            console.log(result.price);
            console.log(result.id);
            //etc..
        });
    }
    ...
});

以上内容应将您想要的结果输出到浏览器的控制台。您现在需要做的就是将此信息解析为您要将其放入的任何元素。因此,如果您的ID为"my_input_price"的输入,您将执行$("#my_input_price").val(result.price);,依此类推。

答案 3 :(得分:0)

试试这个,

success: function(data) {
    var obj = $.parseJSON(data);
    console.log(obj[0]['title']);
    console.log(obj[0]['price']);
    //etc..
}

我希望这会有效..