从mysql数据库获取数据并在javascript中使用

时间:2022-05-11 16:59:47

I have a javascript that dynamically builds an html page. In the html page there are textarea boxes for the user to type information in. The information already exists in a database. I would like to populate the textarea boxes with the database in the mysql database. I have php code that will connect to the database and build an html table with the data, so I know how to do this with php, but I don't know how to do this from the javascrip. I've studied ajax get requests, etc., but I'm still not sure of how to do this.

我有一个动态构建html页面的javascript。在html页面中,有文本框供用户输入信息。信息已经存在于数据库中。我想用mysql数据库中的数据库填充文本区域框。我有php代码可以连接到数据库并使用数据构建一个html表,所以我知道如何使用php实现这一点,但是我不知道如何从javascript实现这一点。我研究过ajax get请求,等等,但我仍然不知道该怎么做。

4 个解决方案

#1


19  

Probably the easiest way to do it is to have a php file return JSON. So let's say you have a file query.php,

可能最简单的方法是让php文件返回JSON。假设你有一个文件query。php,

$result = mysql_query("SELECT field_name, field_value
                       FROM the_table");
$to_encode = array();
while($row = mysql_fetch_assoc($result)) {
  $to_encode[] = $row;
}
echo json_encode($to_encode);

If you're constrained to using document.write (as you note in the comments below) then give your fields an id attribute like so: <input type="text" id="field1" />. You can reference that field with this jQuery: $("#field1").val().

如果您*使用文档。写(正如您在下面的注释中注意到的)然后给您的字段一个id属性,比如:。您可以使用这个jQuery: $(“#field1”).val()引用该字段。

Here's a complete example with the HTML. If we're assuming your fields are called field1 and field2, then

这里有一个完整的HTML示例。如果我们假设你的字段被称为field1和field2,那么。

<!DOCTYPE html>
<html>
  <head>
    <title>That's about it</title>
  </head>
  <body>
    <form>
      <input type="text" id="field1" />
      <input type="text" id="field2" />
    </form>
  </body>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script>
    $.getJSON('data.php', function(data) {
      $.each(data, function(fieldName, fieldValue) {
        $("#" + fieldName).val(fieldValue);
      });
    });
  </script>
</html>

That's insertion after the HTML has been constructed, which might be easiest. If you mean to populate data while you're dynamically constructing the HTML, then you'd still want the PHP file to return JSON, you would just add it directly into the value attribute.

这是构建HTML之后的插入,这可能是最简单的。如果您想在动态构建HTML时填充数据,那么您仍然希望PHP文件返回JSON,那么只需将其直接添加到value属性中。

#2


1  

To do with javascript you could do something like this:

使用javascript,您可以做以下事情:

<script type="Text/javascript">
var text = <?= $text_from_db; ?>
</script>

Then you can use whatever you want in your javascript to put the text var into the textbox.

然后,您可以在javascript中使用您想要的任何内容,将文本var放入文本框。

#3


1  

Do you really need to "build" it from javascript or can you simply return the built HTML from PHP and insert it into the DOM?

您真的需要从javascript“构建”它吗?还是只需从PHP返回构建的HTML并将其插入DOM?

  1. Send AJAX request to php script
  2. 将AJAX请求发送到php脚本。
  3. PHP script processes request and builds table
  4. PHP脚本处理请求和构建表。
  5. PHP script sends response back to JS in form of encoded HTML
  6. PHP脚本以编码的HTML形式将响应发送回JS
  7. JS takes response and inserts it into the DOM
  8. JS接受响应并将其插入DOM

#4


0  

You can't do it with only Javascript. You'll need some server-side code (PHP, in your case) that serves as a proxy between the DB and the client-side code.

你不能只使用Javascript。您需要一些服务器端代码(在您的例子中是PHP),作为DB和客户端代码之间的代理。

#1


19  

Probably the easiest way to do it is to have a php file return JSON. So let's say you have a file query.php,

可能最简单的方法是让php文件返回JSON。假设你有一个文件query。php,

$result = mysql_query("SELECT field_name, field_value
                       FROM the_table");
$to_encode = array();
while($row = mysql_fetch_assoc($result)) {
  $to_encode[] = $row;
}
echo json_encode($to_encode);

If you're constrained to using document.write (as you note in the comments below) then give your fields an id attribute like so: <input type="text" id="field1" />. You can reference that field with this jQuery: $("#field1").val().

如果您*使用文档。写(正如您在下面的注释中注意到的)然后给您的字段一个id属性,比如:。您可以使用这个jQuery: $(“#field1”).val()引用该字段。

Here's a complete example with the HTML. If we're assuming your fields are called field1 and field2, then

这里有一个完整的HTML示例。如果我们假设你的字段被称为field1和field2,那么。

<!DOCTYPE html>
<html>
  <head>
    <title>That's about it</title>
  </head>
  <body>
    <form>
      <input type="text" id="field1" />
      <input type="text" id="field2" />
    </form>
  </body>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script>
    $.getJSON('data.php', function(data) {
      $.each(data, function(fieldName, fieldValue) {
        $("#" + fieldName).val(fieldValue);
      });
    });
  </script>
</html>

That's insertion after the HTML has been constructed, which might be easiest. If you mean to populate data while you're dynamically constructing the HTML, then you'd still want the PHP file to return JSON, you would just add it directly into the value attribute.

这是构建HTML之后的插入,这可能是最简单的。如果您想在动态构建HTML时填充数据,那么您仍然希望PHP文件返回JSON,那么只需将其直接添加到value属性中。

#2


1  

To do with javascript you could do something like this:

使用javascript,您可以做以下事情:

<script type="Text/javascript">
var text = <?= $text_from_db; ?>
</script>

Then you can use whatever you want in your javascript to put the text var into the textbox.

然后,您可以在javascript中使用您想要的任何内容,将文本var放入文本框。

#3


1  

Do you really need to "build" it from javascript or can you simply return the built HTML from PHP and insert it into the DOM?

您真的需要从javascript“构建”它吗?还是只需从PHP返回构建的HTML并将其插入DOM?

  1. Send AJAX request to php script
  2. 将AJAX请求发送到php脚本。
  3. PHP script processes request and builds table
  4. PHP脚本处理请求和构建表。
  5. PHP script sends response back to JS in form of encoded HTML
  6. PHP脚本以编码的HTML形式将响应发送回JS
  7. JS takes response and inserts it into the DOM
  8. JS接受响应并将其插入DOM

#4


0  

You can't do it with only Javascript. You'll need some server-side code (PHP, in your case) that serves as a proxy between the DB and the client-side code.

你不能只使用Javascript。您需要一些服务器端代码(在您的例子中是PHP),作为DB和客户端代码之间的代理。