onclick->;mysql查询->;javascript;同一页


onclick -> mysql query -> javascript; same page

我需要按钮来开始mysql查询,然后将结果插入到javascript代码块中,该代码块将显示在按钮所在的页面上。mysql查询来自下拉菜单的值。

主页.php包含

two drop down menus
div id='one' to hold the results javscript code block
a button to stimulate the mysql query to be displayed in div id ='one' through Javascript
flow of the process is as such
1. user chooses an option from each drop down
2. when ready, the user clicks a button
3. the onclick runs a mysql query with selections from the drop down menu.
4. send the results as array from the mysql query into the javascript code block
5. display the results in div id ='one'

所有这些都需要在同一页上发生!

我遇到的问题是,一旦加载页面,javascipt就是静态的。我无法将mysql结果推送到我需要它出现的页面上的javascript中。将所有内容都放在同一个页面上会造成麻烦。

我不是在寻找为我制定的确切代码,只是应该用来实现这一点的正确流程。提前谢谢!

我试过

使用两个下拉菜单来调用使用httprequest的相同javascript函数。该函数指向一个进行mysql处理的php页面。然后通过httprequest将结果返回到主页。

我尝试将整个Javascript代码块保存为php变量,其中已经包含mysql结果,然后通过HTTPRequest将该变量返回到主页,我认为可以通过这种方式创建动态Javascript代码。没有任何作用

您需要使用一种名为AJAX的技术。我推荐jQuery的.ajax()方法。尝试做原始XHR充其量是痛苦的。

以下是您想要构建代码的方式:

  1. 加载页面
  2. 用户选择一个选项
  3. onChange侦听器触发AJAX请求
  4. 服务器接收并处理请求
  5. 服务器为依赖的select返回一个选项的JSON数组
  6. 客户端AJAX发送方返回响应
  7. 客户端更新select,使其具有JSON数组中的值

基本上,HTTP是无状态的,所以一旦加载了页面,它就完成了。您必须向服务器连续请求动态数据。

使用AJAX、

示例

$.ajax({
    type: "POST",
    url: "yourpage.php",
    data: "{}",
    success: function(result) {
        if(result == "true") {
            // do stuff you need like populate your div
            $("#one").html(result);               
        } else {
            alert("error");
        }
    }
});

为此,您需要学习ajax。这是用来在不重新加载页面的情况下发出请求的。因此,您可以对mysql 进行后台调用

你的代码将类似于

$("#submitbutton").live("click",function(){
$.ajax({url:"yourfile"},data:{$(this).data}).done(function(data){
//this data will in json form so decode this and use this in div 2
var x =$.parseJSON(data);
$("#div2").html(x.val());
})
})

CCD_ 2是连接到服务器并发出数据库请求的主文件

以下是我如何使用onchange方法来激发MYSQL查询并让Highchart显示结果。主要问题是返回的JSON数组是一个需要转换为INT的字符串。resultArray变量随后用于highChart的data:部分。

$(function(){
  $("#awayTeam").change(function(){ 
    $.ajax({
    type: "POST",    
    data: "away=" + $("#awayRunner").val(),
    dataType: "json",
    url: "/getCharts.php",
    success: function(response){
          var arrayLength = response.length;
          var resultArray = [];
          var i = 0;
          while(i<arrayLength){
              resultArray[i] = parseInt(response[i]);
              i++;
          }            

在PHP代码中,数组必须像下面的一样以JSON形式返回

echo json_encode($awayRunner);