我应该如何从英特尔 XDK Web 应用程序向 MySQL 发出请求？答案

【问题标题】：How should I go about making requests to MySQL from an Intel XDK web app?我应该如何从英特尔 XDK Web 应用程序向 MySQL 发出请求？
【发布时间】：2014-08-20 15:36:43
【问题描述】：

我正在开发一个瘦 Web 应用程序，它接受一些搜索条件，搜索 mysql 数据库，然后在应用程序的另一个页面上返回该信息。我是英特尔 XDK 和一般 Web 应用程序的新手。我真正欣赏的是一些说明和伪代码，甚至是指向有帮助的地方的链接。我只是不确定 XDK 中的哪些代码。任何帮助都会很棒。谢谢！

<!DOCTYPE html>
<html><!--HTML5 doctype-->

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
var isIntel=window.intel&&window.intel.xdk
// This event handler is fired once the intel libraries are ready
function onDeviceReady() {
    //hide splash screen now that our app is ready to run
    intel.xdk.device.hideSplashScreen();
    setTimeout(function () {
        $.ui.launch();
    }, 50);
}
//initial event handler to detect when intel is ready to roll
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
if(isIntel)
    $.ui.autoLaunch = false;
$.ui.useOSThemes = true; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
    if ($.ui.useOSThemes && (!$.os.ios||$.os.ios7))
        $("#afui").removeClass("ios");
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="afui" class="ios">
    <div id="header" class="header"></div>
    <div id="content" style="">
        <div class="panel" title="Main" data-nav="nav_0" id="main" selected="selected"
        style="" data-appbuilder-object="page">

        <div class="container" style="width: 100%; height: 100%; position: relative;" data-appbuilder-object="container">
            <img src="images/PLD_banner_1100.jpg" style="width: 100%; height: auto;" alt="Title"
            data-appbuilder-object="image" class="" title="PLDbanner">
            <div class="select_element form_element" style="width: 100%; overflow: hidden; margin-bottom: 15px;"
            data-appbuilder-object="select">
                <label for="">Search Category:</label>
                <select id="" multiple="multiple">
                    <option value="filenum" selected="">File Number</option>
                    <option value="listeeName">Listee Name</option>
                    <option value="standard">Standard</option>
                    <option value="productdesc">Product Description</option>
                    <option value="lmac">Listed Model/Additional Company</option>
                </select>
            </div>
            <div class="select_element form_element" style="width: 100%; overflow: hidden;"
            data-appbuilder-object="select">
                <label for="">Search for...</label>
                <select id="" multiple="multiple">
                    <option value="exact" selected="">Exact Text</option>
                    <option value="all">All Keywords</option>
                    <option value="any">Any Keywords</option>
                </select>
            </div>
            <div class="text_item" data-appbuilder-object="text" style="margin-top: 15px; margin-bottom: 15px; text-align: center;">Enter File Number, Listee Name, Product Description, Standard or
                Listed Model.</div>
            <div class="input_element form_element" style="width: 100%; overflow: auto; margin-bottom: 15px;"
            data-appbuilder-object="input">
                <label for="txtSearch"></label>
                <input type="text" style="float:left;" id="txtSearch" placeholder="">
            </div><a class="button" href="#" style="position: relative; width: 100%; z-index: 2;"
            data-appbuilder-object="button" data-transition="slide">Search</a>
        </div>
    </div>
    <div class="panel" title="New Page" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
    style=""></div>
    <div class="panel" title="New Page" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
    style=""></div>
    <div class="panel" title="New Page" data-nav="nav_0" id="page_3" data-appbuilder-object="page"
    style=""></div>
</div>
<div id="navbar" class="footer">
    <a href="#main" class="icon home">Home</a>
</div>
<header id="header_0" data-appbuilder-object="header">
    <a id="backButton" href="#" class="button backButton" style="visibility: visible; ">Back</a>
    <h1 id="pageTitle" class="">test</h1> 
</header>
<nav id="nav_0" data-appbuilder-object="nav">
    <h1>Side Menu</h1>
</nav>
</div>
</body>




</html>

这是我的网络应用程序主页的代码。其中大部分是内置的（我选择了 appStarter），然后我主要只是将表单拖放到界面上，而不是自己硬编码。所以我是这里的主要新手。

【问题讨论】：

您需要有一些服务器，而不是在此服务器上构建一些 api 并将您的请求从您的应用程序发送到服务器并返回结果。在谷歌上搜索 api
感谢您的回复。我知道我将编写一些 AJAX/Jquery，它将用户输入发送到连接到我有权访问的服务器的另一个页面，然后在另一个 XDK 页面上返回请求的结果。我想我要问的是 Jquery 去哪里了？ xdk 可以与控制服务器查询的中间人网页通信吗？在本例中，它是一个 ASP.NET 页面。

标签： mysql html web-applications intel-xdk

【解决方案1】：

我在一个 javascript 文件上处理我的 AJAX 请求。我认为 XDK 在你的目录 (www) 的 js 文件夹下带来了一个名为 index_user_scripts.js 的默认文件，你可以在那里添加你的函数或创建你自己的 .js 文件。您必须将它包含在 index.html 头部的底部，如下所示：

       <head>
          /*stylesheets and other stuff goes here*/
       <script type="application/javascript" src="js/index_user_scripts.js"></script> 
       </head>

使用 AJAX 的函数示例：

        `$(function() 
        {
          $("#searchButton").click(function() 
          {
            $.ajax
           ({
              type: "POST",
              url: "http://yourwebpage.php",
              data: string,
              success: function(xml) 
              {

               },
              error: function(jqXHR, textStatus, errorThrown)
              {
                alert(errorThrown.message);
               }

           });

        });

       });`

希望对您有所帮助！

【讨论】：