JQuery从加载的ajax发送元素id数据

I'm loading the page content without refresh using this code

我正在使用此代码加载页面内容而不刷新

<script>
        $(document).ready(function(){
            //set trigger and container
            var trigger = $('#nav ul li a'),
                container = $('#container');
            //do on click
            trigger.on('click', function(e){
                /***********/
                 e.preventDefault();

                //get the link location that was clicked
                pageurl = $(this).attr('href');



                //to change the browser URL to th  if(pageurl!=window.location){
                  window.history.pushState({path:pageurl},'',pageurl+'.php');



               /* reload content without refresh */
                //set loading img
                $('#container').append('<div id = "loading">WAIT...  <img src = "img/ajax-loader-small.gif" alt="Currently loading"   /></div>');
                //change img location to center
                $("#loading").css({"position": "absolute", "left": "50%", "top": "50%"});
                //get the  trigger to reload the contents
                var $this = $(this),
                    target = $this.data('target');

                container.load(target + '.php');



            });
        });
        // fix url in the browser when click on backward and foreword  arrows
        $(window).bind('popstate', function() {
            $.ajax({url:location.pathname+'?rel=tab',success: function(data){
                $('#container').html(data);
            }});
        });



    </script>

Then I'm trying to get the id value and send it to another page using ajax, since there's no refresh.

然后我试图获取id值并使用ajax将其发送到另一个页面，因为没有刷新。

 <li><a href="#"><strong>CATEGORY</strong><span> MENU ELEMENTS</span></a>
            <ul class="sub-menu">
                <li><a id="id_1"  data-target='post_category'>Sub_1</a></li>
                <li><a id="id_2"  data-target='post_category'>Sub_2</a></li>
                <li><a id="id_3"  data-target='post_category'>Sub_3</a></li>
                <li><a id="id_4"  data-target='post_category'>Sub_4</a></li>
                <li><a id="id_5"  data-target='post_category'>Sub_5</a></li>
                <li><a id="id_6"  data-target='post_category'>Sub_6</a></li>
                <li><a id="id_7"  data-target='post_category'>Sub_7</a></li>
            </ul>
   </li>

JQuery code

JQuery代码

<script>

    $(document).on("click","a",function(e){
        $.ajax({
            url: "post_category.php",
            type: "POST",
            data: $(this).attr("id")
        });
 });
</script>

php code in the other page

其他页面中的PHP代码

<?php

if(isset($_POST['id'])){
 echo 'Worked';
} else {
  echo 'No data';
}

the jquery take the id successfully, but it didn't send the data to the required page correctly so it always unset and I get No data in the else condition. I tried everything, but nothing worked. Please help.

jquery成功获取了id，但它没有正确地将数据发送到所需的页面，因此它总是未设置，并且在else条件下我得到No data。我尝试了一切，但没有任何效果。请帮忙。

3 个解决方案

#1

The problem looks to be in the data you are trying to post. You need to post a valid JSON object.

问题似乎出现在您要发布的数据中。您需要发布有效的JSON对象。

Make sure you construct a valid javascript object and then use the JSON.stringify function to convert your javascript object into an JSON object.

确保构造有效的javascript对象，然后使用JSON.stringify函数将javascript对象转换为JSON对象。

Set your id using $(this) outside of your $.ajax call to reference the anchor element instead of the $.ajax object.

在$ .ajax调用之外使用$（this）设置你的id来引用anchor元素而不是$ .ajax对象。

Something like the following should give you the desired result:

像下面这样的东西应该给你想要的结果：

<script>
    $('a').on("click", function (e) {
        var id = $(this).attr("id");
        $.ajax({
            url: "post_category.php",
            type: "POST",
            data: JSON.stringify({
                id: id
            })
        });
    });
</script>

#2

Need to send data in key-value pair, so that you can access them by key in the other page. Also this is referring to the document and thus $(this).attr('id') is null. You can try the below code as shown:

需要以键值对方式发送数据，以便您可以通过其他页面中的键访问它们。这也是指文档，因此$（this）.attr（'id'）为null。您可以尝试以下代码，如下所示：

<script>

$(document).on("click","a",function(e){
   var element =e.target;
    $.ajax({
        url: "post_category.php",
        type: "POST",
        data: {'id':$(element).attr("id")}
    });

</script>

#3

 $(document).on("click","a",function(e){   
     $.ajax({
        url: "post_category.php",
        type: "POST",
        data: {id:$(this).attr("id")}
      });
  });

Try this you were missing id:(this).attr("id")

试试这个你缺少id :(这个）.attr（“id”）

#1