ajax jquery表单获取mysql数据

I have troubles with JQuery and Ajax forms. I'm new in Ajax and Jquery. I'm creating a webapp with a search form. The data I'm fetching from MYSQL Database. So I have a request page with a form, then the mysql processing file, a javascript to return the requested data and a html file, where the results are displayed. So, my problem is, that I can't display the results under index.html. Therefore I tried to action directly to landmarks.php and there I can see the reuslts in array like this

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

The request.html file

<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>

Then this file for 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) . ');';
?>

my json callback looks like this

$(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.')
        }
    });
});

and finally my final page, where the results should be displayed

<!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>
dongxun8189
dongxun8189 我不确定你的PHP代码有多正确,但你的jquery代码有一个问题。在成功的过程中,你期望结果是$.each的一系列事情,但在php中你没有发送有效的json结果。因为你的结果就像jsoncallback(your_mark_json);并且无法解析我认为你不应该连接json_encode()输出,因为它不会在javascript中成功解析。尝试直接回显json_encode()
5 年多之前 回复
dongzhang6021
dongzhang6021 我给你一个建议。在使用纯JavaScript解决此类问题之前,请不要使用jQuery。只有在那之后你才有能力以正确的方式使用jQuery。
5 年多之前 回复
down00111
down00111 请使用PDO或Mysqli
5 年多之前 回复
dounayan3643
dounayan3643 index.html??将其更改为index.php
5 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐