JQuery：无法使用相对路径访问 php 文件答案

【问题标题】：JQuery: Cannot Access php file using Relative PathJQuery：无法使用相对路径访问 php 文件
【发布时间】：2020-05-18 03:21:45
【问题描述】：

真的很难为 Ajax 请求找到相对路径。

我试图从 like.js 到 likeunlike.php

错误信息：

jquery-3.3.1.js:9600 POST http://localhost:8000/serverside/likeunlike.php 404（未找到）

文件结构：

jQuery:

$(document).ready(function(){

    // like and unlike click
    $(".content").on("click",".like",function(){
        var id = $(this).attr("id");  // Getting Button id
        var split_id = id.split("_");

        var postid = split_id[1]; 
        var userid = split_id[2];

        // AJAX Request
        $.ajax({
            url: '../serverside/likeunlike.php',
            type: 'post',
            data: {postid:postid,userid:userid},
            dataType: 'json',
            success: function(data){
                var likes = data['likes'];
                var type = data['type'];

                $("#likes_" + postid + "_" + userid).text(likes);

                if(type == 1){
                   $("#like_" + postid + "_" + userid).css("color","lightseagreen");

                }

                if(type == 0){
                    $("#like_" + postid + "_" + userid).css("color","#ffa449"); 
                }
            }
        });

    });

});

已按照其中一个答案的要求提供了索引文件。希望能帮助到你。索引.php：

<?php

include "detail/config.php";

?>

<html>
    <head>
        <title>Talk</title>
        <link href="style/style.css" type="text/css" rel="stylesheet" />
        <script src="jquery/jquery-3.3.1.js" type="text/javascript"></script>
        <script src="search/script/like.js" type="text/javascript"></script>
        <script src="search/check/check.js" type="text/javascript"></script>
    </head>

<script>

$(function() {
  $('form').on("submit", function(e) {
    e.preventDefault();
    $('#error').text(""); // reset
    var name = $.trim($("#search").val());
    if (name.match(/[^a-zA-Z0-9 ]/g)) {
      $('#error').text('Please enter letters and spaces only');
      return false;
    }
    if (name === '') {
      $('#error').text('Please enter some text');
      return false;
    }
    if (name.length > 0 && name.length < 3) {
      $('#error').text('Please enter more letters');
      return false;
    }

    $.ajax({
      url: 'search/search.php',
      method: 'POST',
      data: {
        msg: name
      },
      dataType: 'json',
      success: function(response) {

      $(".content").html("")
      $(".total").html("")

        if(response){
          var total = response.length;
          $('.total') .append(total + " Results");
         }

        $.each(response, function() {
          $.each($(this), function(i, item) {

            var mycss = (item.Type == 1) ? ' style="color: #ffa449;"' : '';
            $('.content').append('<div class="post"><div class="post-text"> ' + item.MessageText + ' </div><div class="post-action"><input type="button" value="Like" id="like_' + item.ID + '_' + item.UserID + '" class="like" ' + mycss + ' /><span id="likes_' + item.ID + '_' + item.UserID + '">' + item.cntLikes + '</span></div></div>');
          });
        });
      }
    });
  });
});


</script>

<body>

<form action="index.php" method="post" id="myForm" autocomplete="on"><pre>

<input name="msg" id="search" type="text" autofocus value= "<?php if(isset($_POST['msg'])) { 
 echo htmlentities ($_POST['msg']); }?>"></input> <span id="error"></span>

<input type="submit" style="border:0; padding:0; font-size:0">

</pre></form>

<div class="total">
</div>

<div class="content">
</div>

</body>
</html>

【问题讨论】：

你的所有页面都加载到主 index.php 上吧？
url: '../serverside/likeunlike.php'
@vivekmodi 嗨对不起。这是我第一次尝试将我的代码分成不同的文件夹。 index.php 是主页。我不太明白这个问题。我的知识不是很好。
@db1975 抱歉，我不确定您的意思。能否详细说明。我正在为此苦苦挣扎。
我认为你不需要使用 ../ 只需在 url 中使用 serverside/likeunlike.php

标签： php jquery ajax relative-path

【解决方案1】：

jquery / js 没有关于他的位置的信息。

这应该可行。

var base_url = window.location.origin;

// like and unlike click
    $(".content").on("click",".like",function(){
        var id = $(this).attr("id");  // Getting Button id
        var split_id = id.split("_");

        var postid = split_id[1]; 
        var userid = split_id[2];

        // AJAX Request
        $.ajax({
            url: base_url + '/search/serverside/likeunlike.php',
            type: 'post',
            data: {postid:postid,userid:userid},
            dataType: 'json',
            success: function(data){
                var likes = data['likes'];
                var type = data['type'];

                $("#likes_" + postid + "_" + userid).text(likes);

                if(type == 1){
                   $("#like_" + postid + "_" + userid).css("color","lightseagreen");

                }

                if(type == 0){
                    $("#like_" + postid + "_" + userid).css("color","#ffa449"); 
                }
            }
        });

    });

});

【讨论】：

谢谢。这给出了错误 jquery-3.3.1.js:9600 POST localhost:8000/search/serverside/likeunlike.php 404 (Not Found)
我认为，您的 php 文件只能通过 index.php 访问。你能显示你的 index.php 吗？有没有引用likeunlike.php的地方？
好的，谢谢。已将 index.php 文件代码添加到问题中。
如果没有完整的代码很难解决这个问题。除了 index.php 或 likeunlike.php 之外是否还有 .htaccess 文件？在 index.php 文件中还有一个 ajax 调用。这个电话有效吗？
是的，Ajax 调用有效，并且没有 .htacces 文件。我不知道那是什么。

【解决方案2】：

我已经通过以下方式解决了这个问题：

使我的目录结构和文件名更简单。它被过度设计了。我现在有我的根文件夹，然后只比文件夹低一级。
我一直在努力解决的 Ajax url 路径被修改为“serverside/like.php”，它获取了 php 文件但什么也没发生。
查看 like.php 代码我有一个 include("../con/config.php") 没有 ';'。我添加了这个，现在可以正常工作了。

感谢大家的帮助。一如既往地非常感谢。

新文件夹结构：

【讨论】：