Question

我遇到了JQuery和Ajax表单的麻烦。我是Ajax和Jquery的新人。我正在使用搜索表单创建一个webapp。我从MYSQL数据库获取的数据。所以我有一个带有表单的请求页面，然后是mysql处理文件，一个用于返回所请求数据的javascript和一个html文件，其中显示结果。所以，我的问题是，我无法在index.html下显示结果。因此我试图直接对landmarks.php采取行动，在那里我可以看到像这样的数组中的重新连接

([{"id":"1","name":"Big Ben","latitude":"51.500600000000","longitude":"-0.124610000000"}]);

request.html文件

<head>
    <meta charset="UTF-8">
    <title>Updated - loading external data into a PhoneGap app using jQuery 1.5</title>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>




<body>
<form method="post" action="landmarks.php">
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
            <label for="l_name"><b>Name</b></label>
                <input type="text" name="l_name" id="l_name" value="" />
                <input class="submit" type="submit" value="Submit" />
        </fieldset>
    </div>
</form>


</body>

然后这个文件为mysql

<?php
header('Content-type: application/json');

$server = "localhost";
$username = "test";
$password = "test132";
$database = "landmarks";

$l_name = $_POST["l_name"];

$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());
mysql_select_db($database, $con);

$sql = "SELECT id, l_name AS name, l_lat AS latitude, l_long AS longitude FROM landmarks WHERE l_name like '".$l_name."' ORDER BY l_name";
$result = mysql_query($sql) or die ("Query error: " . mysql_error());

$records = array();

while($row = mysql_fetch_assoc($result)) {
    $records[] = $row;
}

mysql_close($con);

echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';
?>

我的json回调看起来像这样

$(document).ready(function(){
    var output = $('#output');

    $.ajax({
        url: 'landmarks.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){ 
                var landmark = '<h1>'+item.name+'</h1>'
                + '<p>'+item.latitude+'<br>'
                + item.longitude+'</p>';

                output.append(landmark);
            });
        },
        error: function(){
            output.text('There was an error loading the data.')
        }
    });
});

最后是我的最后一页，应该显示结果

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Updated - loading external data into a PhoneGap app using jQuery 1.5</title>

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="js/load-json.js"></script>
</head>
<body>
    <div id="output"></div>
</body>
</html>

ajax jquery表单获取mysql数据

0 个答案: