Jquery 英特尔XDK、AJAX和XAMPP mySQL连接
我对Intel XDK和jquery mobile都是新手。我知道我想在我的应用程序中使用数据库,所以我开始制作一个简单的页面,在XAMPP上查询我的数据库。基本页面如下:Jquery 英特尔XDK、AJAX和XAMPP mySQL连接,jquery,mysql,ajax,jquery-mobile,intel-xdk,Jquery,Mysql,Ajax,Jquery Mobile,Intel Xdk,我对Intel XDK和jquery mobile都是新手。我知道我想在我的应用程序中使用数据库,所以我开始制作一个简单的页面,在XAMPP上查询我的数据库。基本页面如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("tap","#name1",(function(e){
e.preventDefault(); // prevent the default action of the click
var vname = $("#name").val();
$.post("test.php", {name:vname}, function(response, status) { // POST instead of GET
// never use alert() for troubleshooting
// output for AJAX must be in the callback for the AJAX function
//console.log("recieved data-------*\n\nResponse : " + response +"\n\nStatus : " + status);
$('#table').html(response); // put response in div
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>The tap Event</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post">
<select name="name">
<option value="Gammaplex">Gammaplex</option>
<option value="Specifics">Specifics</option>
<option value="Vigam">Vigam</option>
</select>
<button id="name1" type="submit">GO</button></form>
</div>
<div id="table"></div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
$(文档).on(“点击”,“命名1”),(函数(e){
e、 preventDefault();//防止单击的默认操作
var vname=$(“#name”).val();
$.post(“test.php”,{name:vname},函数(响应,状态){//post而不是GET
//切勿使用alert()进行故障排除
//AJAX的输出必须在AJAX函数的回调中
//console.log(“接收到的数据------*\n\n响应:+response+”\n\n状态:+status”);
$('#table').html(response);//将响应放入div中
});
});
tap活动
甘美枫
详情
维甘
去
页脚文本
页面布局直接来自W3C学校。我在dtabase上运行的查询是一个已知的脚本,可以在我的PHP应用程序上运行。为了完整性,我添加了它:TEST.PHP
<?php
include 'config.php';
$batchtype2 =($_POST['name']);
$batchtype2 = mysqli_real_escape_string($con,$batchtype2);
$sql = "SELECT * FROM script WHERE scriptname ='".$batchtype2."' ";
$result = mysqli_query($con,$sql);
$count=mysqli_num_rows($result);
if($count==0 ){
echo "</br></br></br></br></br></br></br><p> No Matching results found</p>";
}else{
while($row = mysqli_fetch_array($result)) {
echo " <form id='addgo' method='post'><label>Batch Number :</label><input id='gambana' name='gambana'>";
echo " <label>Planned Start Time : </label>"
. "<p><label>Hours /</label><label style='margin-left:2%;'>Mins</label></p><select id='pbstarti' name='pbstarti'>"
. "<option value='00'>00</option>"
. "<option value='01'>01</option>"
. "<option value='02'>02</option>"
. "<option value='03'>03</option>"
. "<option value='04'>04</option>"
. "<option value='05'>05</option>"
. "<option value='06'>06</option>"
. "<option value='07'>07</option>"
. "<option value='08'>08</option>"
. "<option value='09'>09</option>"
. "<option value='10'>10</option>"
. "<option value='11'>11</option>"
. "<option value='12'>12</option>"
. "<option value='13'>13</option>"
. "<option value='14'>14</option>"
. "<option value='15'>15</option>"
. "<option value='16'>16</option>"
. "<option value='17'>17</option>"
. "<option value='18'>18</option>"
. "<option value='19'>19</option>"
. "<option value='20'>20</option>"
. "<option value='21'>21</option>"
. "<option value='22'>22</option>"
. "<option value='23'>23</option>"
. "</select><select id='endtime' style='margin-left:2%;' name='endtime'>"
. "<option value='00'>00</option>"
. "<option value='05'>05</option>"
. "<option value='10'>10</option>"
. "<option value='15'>15</option>"
. "<option value='20'>20</option>"
. "<option value='25'>25</option>"
. "<option value='30'>30</option>"
. "<option value='35'>35</option>"
. "<option value='40'>40</option>"
. "<option value='45'>45</option>"
. "<option value='50'>50</option>"
. "<option value='55'>55</option>"
. "</select>";
echo " <label> Planned Start Date:</label> <input name='datepicker1' id='datepicker1' readonly='readonly'>";
echo " <input id='scriptp' name='scriptp' type ='hidden' value='0'>";
echo " <input id='batchtype' name='batchtype' type ='hidden' value='".$row['scriptname']."'>";
echo "<input id='scripthours' name = 'scripthours'; type='hidden' value='".$row['scripthours']."'>";
echo "<input id='formulation' name = 'formulation'; type='hidden' value='".$row['formulation']."'>";
echo " <input id='adddate' type='submit' value='Add ".$row['scriptname']." batch' class='btn btn-primary'></form>";
echo " ";
}
}
mysqli_close($con);
?>
Add--header('Access-Control-Allow-Origin:');--作为php脚本文件中的第一行。然后从XAMP服务器/pc中找到您的WAN IP地址(google=whats my WAN IP)。获取地址并将($.post(“test.php”)更改为($.post(“)。登录到路由器上的防火墙-虚拟服务器下。您可能有一个下拉菜单,因此选择(WEB服务器/HTTP),它将为您填充空格,以便您可以添加XAMPS服务器ip的最后一位数字——如果您不知道本地XAMP ip,请打开控制台并键入--ifconfig(在mac、linux上)--ipconfig(windows)@Tasos Anastastasiou感谢您的评论,我今晚将试一试。昨晚放弃了ghost。在过去的netbeans、joomla和标准phonegap/Cordova安装中,简单地将项目放在htdocs中总是有效的。希望这能解决问题。它们可以更快地访问,服务器脚本驻留在web服务器上,因此您需要一个doma以名称或wan ip在服务器上访问它们。标头('access-Control-Allow-Origin:');因为php脚本可以帮助解决网络访问问题,尽管还有其他方法可以实现127.0.01是服务器的环回地址。机器的IP地址是什么?例如192.168.1.10——这是您需要在路由器上插入的地址。一旦您启用端口80将web流量定向到web服务器的IP地址,路由器将您将能够向打开web服务器的PC发送HTTP请求。因此,当您在世界上任何一个地方的浏览器上键入WAN IP时,您应该访问您的网站,并使用WAN地址在JS文件中使用PHP脚本您的WAN IP和web服务器IP是不同的地址。WAN是公用的,web服务器是专用的。您需要谷歌为您的系统、windows或mac提供如何查找我的本地IP地址的信息。这是您需要在虚拟服务器的路由器上插入的地址---
<?php
$host="localhost"; // Host name
$username="root"; // Mysql username
$password=""; // Mysql password
$db_name="test3"; // Database name
// Connect to server and select databse.
$con = mysqli_connect("$host", "$username", "$password")or die("cannot connect");
mysqli_select_db($con,"$db_name")or die("cannot select DB");