Javascript php文件的代码未通过ajax调用执行

Javascript php文件的代码未通过ajax调用执行,javascript,php,jquery,mysql,ajax,Javascript,Php,Jquery,Mysql,Ajax,我的PHP文件中有一个按钮,当我单击该按钮时,我希望运行另一个PHP文件并将一些数据保存在MySQL表中。为此,我正在使用这个链接中建议的AJAX调用,这是StackOverflow本身的答案 这是我的show_计划文件,我试图从中执行另一个PHP文件的代码: $('.edit').click(function() { var place_type = $(this).attr("id"); console.log(place_type);

我的PHP文件中有一个按钮,当我单击该按钮时,我希望运行另一个PHP文件并将一些数据保存在MySQL表中。为此,我正在使用这个链接中建议的AJAX调用,这是StackOverflow本身的答案

这是我的show_计划文件,我试图从中执行另一个PHP文件的代码:

$('.edit').click(function() {
        var place_type = $(this).attr("id");
        console.log(place_type);
        $.ajax({
            type: "POST",
            url: "foursquare_api_call.php",
            data: { place_type: place_type }
        }).done(function( data ) {
            alert("foursquare api called");
            $('#userModal_2').modal('show');
        });
    });
这里的“编辑”是按钮的类别,并且该按钮的id正在控制台中正确打印

这是我的foursquare_api_call.php文件,单击按钮时应运行该文件:

<?php
    session_start();
    include('connection.php');

    if(isset($_POST['place_type'])){
        $city = $_SESSION['city'];
        $s_id = $_SESSION['sid'];
        $query = $_POST['place_type'];
        echo "<script>console.log('inside if, before url')</script>";
        $url = "https://api.foursquare.com/v2/venues/search?client_id=MY_CLIENT_ID&client_secret=MY_CLIENT_SECRET&v=20180323&limit=10&near=$city&query=$query";
        $json = file_get_contents($url);
        echo "<script>console.log('inside if, after url')</script>";
        $obj = json_decode($json,true);
        for($i=0;$i<sizeof($obj['response']['venues']);$i++){
            $name = $obj['response']['venues'][$i]['name'];
            $latitude = $obj['response']['venues'][$i]['location']['lat'];
            $longitude = $obj['response']['venues'][$i]['location']['lng'];
            $address = $obj['response']['venues'][$i]['location']['address'];

            if(isset($address)){
                $statement = $connection->prepare("INSERT INTO temp (name, latitude, longitude, address) VALUES ($name, $latitude, $longitude, $address)");
                $result = $statement->execute();
            }
            else{
                $statement = $connection->prepare("INSERT INTO temp (name, latitude, longitude) VALUES ($name, $latitude, $longitude)");
                $result = $statement->execute();
            }
        }
    }
?>

控制台中未记录任何console.log,并且“temp”表也未更新。有人能告诉我哪里出错了吗?或者甚至可以像这样执行PHP文件的代码吗?

您的JavaScript正在向执行PHP程序的URL发出HTTP请求

当收到响应时,您可以执行以下操作:

所以你:

警觉 示范 在任何时候,您都不会对数据做任何处理,因为数据就是响应的所在

仅向浏览器发送一些包含脚本元素的HTML并不会导致浏览器将该HTML转换为DOM并执行所有脚本元素

你需要明确地这样做

也就是说,通过Ajax发送带有嵌入式JS的HTML块充其量是一件麻烦事


这就是为什么大多数web服务返回格式为JSON的数据,并让客户端JS处理这些数据。

要返回php代码的内容,可以执行以下操作

您可以使用此函数的任何调用

function check_foursquare_api_call(place_type) {
    var place_type= encodeURIComponent(place_type);
    var xhttp;
//last moment to check if the value exists and is of the correct type
    if (place_type== "") {
    document.getElementById("example_box").innerHTML = "missing or wrong place_type";
    return;
  } 
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("example_box").innerHTML = xhttp.responseText;
      $('#userModal_2').modal('show');
    }
  };
 
    xhttp.open("GET", "foursquare_api_call.php?place_type="+place_type, true);
    xhttp.send();
}
这将允许您发送和执行foursquare_api_调用文件的代码,并将任何元素返回到example_box,如果需要,您可以返回整个模式, 您可以使用任何POST/GET方法,监视进度,请参阅此处的更多信息

您是否检查了networktab?有一个“foursquare\u api\u call.php”文件的条目。当您单击它时,响应是什么?它首先显示警报消息,然后显示模型。但是“temp”表中没有条目。OP在一条注释中说,表中没有添加任何记录,这是在php端完成的。
function check_foursquare_api_call(place_type) {
    var place_type= encodeURIComponent(place_type);
    var xhttp;
//last moment to check if the value exists and is of the correct type
    if (place_type== "") {
    document.getElementById("example_box").innerHTML = "missing or wrong place_type";
    return;
  } 
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("example_box").innerHTML = xhttp.responseText;
      $('#userModal_2').modal('show');
    }
  };
 
    xhttp.open("GET", "foursquare_api_call.php?place_type="+place_type, true);
    xhttp.send();
}