尝试使用json使用mysql,php和jquery填充我网站的区域

Ok, so this is my first attempt at doing anything with JSON. I have done a lot with PHP and MySql as well as jQuery and JavaScript...but nothing with JSON. I have some data in a MySql database. In the codes below i am using a PHP file to retrieve the data from the MySql database and using json_encode to format it to JSON. This file is being called by the JavaScript that runs when the page loads (well, it runs on document.ready actually). I then use jQuery to access the JSON keys and values to fill in areas of the page "dynamically". Here is the code snippets i am using (excuse my "noobness" on writing these snippets, still learning all this).

This is my script that is on my HTML page test.php:

<script type="text/javascript">
$(document).ready(function(){
 $.getJSON("json_events.php",function(data){
  $.each(data.events, function(i,events){
   var tblRow =
    "<tr>"
    +"<td>" + events.id + "</td>"
    +"<td>" + events.customerId + "</td>"
    +"<td>" + events.filingName + "</td>"
    +"<td>" + events.title + "</td>"
    +"<td>" + events.details + "</td>"
     +"<td>" + events.dateEvent + "</td>"
    +"<td><a href='assets/customers/testchurch/events/" + events.image + "'>" + events.image + "</a></td>"
    +"<td>" + events.dateStart + "</td>"
    +"<td>" + events.dateEnd + "</td>"
    +"</tr>"
   $(tblRow).appendTo("#eventsdata tbody");
  });
 });

    $.getJSON("json_events.php",function(data){
     $.each(data.events, function(i,events){
      $("#title").html("First event title: " + events.title + " ...");
     });
    });
});
</script>

This is the code for the php file being called by the above JS: json_events.php

<?php
require_once('includes/configread.php');

$arrayEvents = array();
$resultsEvents = mysql_query("SELECT * FROM events");

while($objectEvents = mysql_fetch_object($resultsEvents)) {
 $arrayEvents[] = $objectEvents;
}

$json_object_events = json_encode($arrayEvents);
$json_events = "{\"events\": " . $json_object_events . " }";

echo $json_events;

require_once('includes/closeconnread.php');
?>

This is my JSON that is held in the variable $json_events from my php file json_events.php:

{
    "events": [
        {
            "id": "2",
            "customerId": "1004",
            "filingName": "testchurch",
            "title": "Kenya 2011 Training Meeting",
            "details": "This meeting will be taking place on Sunday, February 10th @ 6pm.  Get ready for our annual Kenya trip in 2011.  We have been blessed to be able to take this trip for the past 3 years.  Now, it's your turn to bless others!  Come to this training meeting to learn how to minister to the people in Kenya and also learn what we'll be doing there.",
            "dateEvent": "2011-02-10",
            "image": "kenya2011.jpg",
            "dateStart": "2010-09-04",
            "dateEnd": "2011-02-10"
        },
        {
            "id": "6",
            "customerId": "1004",
            "filingName": "testchurch",
            "title": "New Series: The Journey",
            "details": "We will be starting our new series titled "The Journey".  Come worship with us as we walk with Paul on his 2nd missionary journey.",
            "dateEvent": "2011-01-02",
            "image": "",
            "dateStart": "2010-09-06",
            "dateEnd": "2011-01-02"
        }
    ]
}

This is my HTML on test.php:

<table id="eventsdata" border="1">
    <thead>
        <tr>
            <th>id</th>
            <th>customerId</th>
            <th>filingName</th>
            <th>title</th>
            <th>details</th>
            <th>dateEvent</th>
            <th>image</th>
            <th>dateStart</th>
            <th>dateEnd</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<div id="title"></div>

I have two questions really...

Question 1:
Does this code look like it is written correctly at first glance?

Question 2:
I want to be able to select only the title from the first event in the JSON array. The code i am using now is selecting the second events' title by default it seems. How can i accomplish this?

3个回答



我要改变的第一件事是你正在调用 $ .getJSON(“json_events.php”...... </ 代码>两次。你应该只调用一次因为数据不应该在调用之间改变。你可以将两个调用一起加入,但是...... </ p>

因为你真的只想要第一个 作为此块的结果的事件标题:</ p>

  $。getJSON(“json_events.php”,function(data){
$ .each(data.events,function( i,events){
$(“#title”)。html(“First event title:”+ events.title +“...”);
});
});
</ code > </ pre>

您真正需要的是将其添加到您的第一个 $。getJSON </ code>调用中并删除上面的块:</ p>

  $(“#title”)。html(“First event title:”+ data.events [0] .title +“...”); 
</ code> </ pre> \ n

您可以在此之后添加:</ p>

  $(tblRow).appendTo(“#eventsdata tbody”); 
});
< / code> </ pre>

这也解决了为什么要显示第二个事件t的问题 书名。 您正在遍历所有标题并将值设置为最后一个。</ p>


另外要注意的是在JSON响应中转义无效字符。 其中一个 details </ code>字段中有引号,这会弄乱数据。</ p>
</ div>

展开原文

原文

The first thing I would change is that you are calling $.getJSON("json_events.php"... twice. You should only call it once because the data shouldn't change between calls. You could join the two calls together, but...

Since you only really want the first event title as a result of this block:

$.getJSON("json_events.php",function(data){
    $.each(data.events, function(i,events){
        $("#title").html("First event title: " + events.title + " ...");
    });
});

All you really need is to add this to your first $.getJSON call and get rid of the above block:

$("#title").html("First event title: " + data.events[0].title + " ...");

You can add that right after this:

    $(tblRow).appendTo("#eventsdata tbody");
});

This would also solve the problem of why you are showing the second event title. You were iterating through all titles and setting the value to the last one.


Another thing to be careful of is escaping invalid characters in your JSON response. One of the details fields has quotes in it, which would mess up the data.

douhe1864
douhe1864 真棒......感谢codethis!
9 年多之前 回复
dongzhonggua4229
dongzhonggua4229 它可能,检查SQL连接:w3schools.com/sql/sql_join.asp。 然后看看从该查询输出JSON时的样子,并从那里编写新的javascript
9 年多之前 回复
dongxie5698
dongxie5698 我还有一个问题......在我的PHP代码中你可以看到我从表中选择*“事件”是否可以从第二个数据库中选择*并将其添加到JSON输出中以便它是一个 输出? 或者这样做是否明智?
9 年多之前 回复
drudfe0446838
drudfe0446838 谢谢你的帮助......工作得很好! 感谢您提供额外的建议。
9 年多之前 回复



我的第一个建议是,不是使用串联来构建表行,而是使用以下方法。</ p>

<预> <代码> $( “&LT; TR&GT;&LT; / TR&gt;” 中)。附加($( “&LT; TD&GT;&LT; / TD&gt;” 中。)HTML(events.id));

</代码> </ PRE>

等。 这样做的原因是你将使用jQuery来防止最新和最大的XSS攻击。 否则,如果 event.details </ code>包含恶意的javascript代码,那么就会被冲洗掉。</ p>
</ div>

展开原文

原文

My first recommendation is that instead of using concatenation to build your table rows use the following approach instead.

$("<tr></tr>").append($("<td></td>").html(events.id)); 

etc. The reason for this is that you'll be using jQuery to prevent the latest and greatest in XSS attacks. Otherwise if event.details contains malicious javascript code you're hosed.

dongtun1683
dongtun1683 谢谢! 好建议!
9 年多之前 回复



问题1:初看起来似乎不错,良好的开端。</ p>

EDIT </ strong>虽然我会查看 json_encode的$ options参数。 除非这只是复制粘贴的受害者,否则第二个条目中的引号会让您遇到麻烦。 (参见PHP手册中的示例)</ p>

问题2:如果你看一下从$ .each传递的参数,你会看到 i </ code>参数 是一个迭代器计数,您应该能够使用每个块中的比较来管理分离第一个元素。</ p>
</ div>

展开原文

原文

Question1: Seems decent at first glace, good start.

EDIT Though i would look in to json_encode's $options parameter. unless this is just a victim of copy-paste, those quotes in the second entry are going to get you in trouble. (see the examples in the PHP manual)

Question2: If you take a look at the parameters passed from $.each, you'll see the i argument is an iterator count, you should be able to manage separating the first element using a comparison within the each block.

dourang8305
dourang8305 谢谢你的回复......我会调查一下。
9 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问