duanjian4698
duanjian4698
2014-07-24 08:35

无法使用jquery从localhost访问数据

I'm using JQuery to access some data and and a PHP file in WWW folder of localhost. I'm sending id to the php file and i want some details regarding that id.

When i use this code inside Intel XDK. Then it is showing perfect inside mobile view but in the browser its not working.

Any type of help will be appreciated.

Index.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>jQuery PHP Json Response</title>
    <style type="text/css">
    div
    {
    text-align:center;
    padding:10px;
    }

    #msg {
    width: 500px;
    margin: 0px auto;
    }
    .members {
    width: 500px ;
    background-color: beige;
    }
    </style>
    </head>
    <body>
    <div id="msg">
    <table id="userdata" border="1">
    <thead>
    <th>Id</th>
    <th>Latitude</th>
    <th>Longitude</th>

    </thead>
    <tbody></tbody>
    </table>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
    </script>
    <script type="text/javascript">

    $(document).ready(function(){
        var result = prompt("Enter a address");
        $.post("http://localhost/getuser.php", { str : result }, function(json) {
            alert(json);

            $.each($.parseJSON(json), function(idx, obj) {
        alert(obj.id);

        var tblRow =
                    "<tr>"
                +"<td>"+obj.id+"</td>"
                +"<td>"+obj.lat+"</td>"
                +"<td>"+obj.lng+"</td>"

                +"</tr>" ;
                $("#userdata tbody").append(tblRow);

            });

    });


    });

    </script>
    </body>
    </html>

And, in WWW folder getuser.php

<?php
    $host="localhost"; //replace with your hostname 
    $username="root"; //replace with your username 
    $password="auroin"; //replace with your password 
    $db_name="map"; //replace with your database 
//  $str = $_REQUEST['str'];
    $str = $_POST['str'];
    //$str = 1;
    $con=mysql_connect("$host", "$username", "$password")or die("cannot connect"); 
    mysql_select_db("$db_name")or die("cannot select DB");
    $sql = "select * from pet where id='".$str."'"; //replace emp_info with your table name 
    $result = mysql_query($sql);
    $json = array();

    while($row=mysql_fetch_object($result)){
    $json[] = $row;

    }
    mysql_close($db_name);
    //echo '{"members":'.json_encode($json).'}';
    echo json_encode($json);

    // please refer to our PHP JSON encode function tutorial for learning json_encode function in detail 
?>

EDIT:-

Some errors are I'm getting in my console ...

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. index.html

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at getuser.php. This can be fixed by moving the resource to the same domain or enabling CORS. getuser.php

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dongsi4815 dongsi4815 7年前

    I recommend that you disable the same-origin policy in your browser in order to test cross domain AJAX request from a local file.

    For example, with Google Chrome on Windows you can disable this policy by launching chrome with the following command :

    C:\Users\YOUR_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security

    Together, both of these flags will allow you to test cross-domain ajax requests from a local file.

    点赞 评论 复制链接分享