为什么在向jQuery的POST请求发送AJAX请求时会传输空数据?

huangapple go评论57阅读模式
英文:

Why is empty data being transmitted when sending an ajax request to jquery post?

问题

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
</head>
<body>
    <div id="all-comments"></div>
    <input type="hidden" name="page_id" value="1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            let page_id = $('input[name="page_id"]').val();
            $.ajax({
                url: 'vender/show_comment.php',
                type: 'POST',
                data: {
                    page_id: page_id
                }
            });
            setTimeout(function() {
                $("#all-comments").load("vender/show_comment.php")
            }, 1000);
        });
    </script>
</body>

show_comment.php

<?php
$page_id=$_POST['page_id'];
 if(empty($page_id))
 $str="I'm empty";
 else
 $str=$page_id; 
?>
<div class="new-comment">
    <p><?php echo $str?></p>
    <p><?php echo $str?></p>
</div>

I take data from input and pass it through ajax, as a result, I get "I'm empty". Why doesn't it output the input value?

Although when I receive the same data by pressing the button and send them to the server, they will not be empty. But I need to do a data offset when the page loads

英文:
&lt;!DOCTYPE html&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;

&lt;head&gt;

&lt;/head&gt;

&lt;body&gt;
    &lt;div id=&quot;all-comments&quot;&gt;&lt;/div&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;page_id&quot; value=&quot;1&quot;&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        $(document).ready(function() {
            let page_id = $(&#39;input[name=&quot;page_id&quot;]&#39;).val();
            $.ajax({
                url: &#39;vender/show_comment.php&#39;,
                type: &#39;POST&#39;,
                data: {
                    page_id: page_id
                }
            });
            setTimeout(function() {
                $(&quot;#all-comments&quot;).load(&quot;vender/show_comment.php&quot;)
            }, 1000);
        });
    &lt;/script&gt;
&lt;/body&gt;

show_comment.php

&lt;?php

$page_id=$_POST[&#39;page_id&#39;];
 if(empty($page_id))
 $str=&quot;I&#39;m empty&quot;;
 else
 $str=$page_id; 
?&gt;
&lt;div class=&quot;new-comment&quot;&gt;
    &lt;p&gt;&lt;?php echo $str?&gt;&lt;/p&gt;
    &lt;p&gt;&lt;?php echo $str?&gt;&lt;/p&gt;
&lt;/div&gt;

I take data from input and pass it through ajax, as a result, I get "I'm empty". Why doesn't it output the input value?

Although when I receive the same data by pressing the button and send them to the server, they will not be empty. But I need to do a data offset when the page loads

答案1

得分: 1

第一个请求是一个POST请求,带有一个载荷,但你忽略了响应。

第二个请求是一个GET请求,没有载荷,并将响应放入了名为"all-comments"的元素中。

你没有做任何事情来在两个请求之间保持数据。

你可以完全删除$.ajax调用,将你的load调用改成POST请求并在其中包含数据:

$(&quot;#all-comments&quot;).load(&quot;vender/show_comment.php&quot;, { page_id })

数据仍然不会在后续的GET请求中持久保存,这通常是评论系统的一个可取特性。

要做到这一点,你需要将数据存储在某个地方(通常选择数据库),然后在后续的请求中检索它。

粗略的伪代码大致如下:

如果是POST请求
    如果数据无效
        以错误方式响应
    否则
        将数据插入数据库
从数据库中获取数据
生成HTML
以HTML形式响应
英文:

You are making two different requests.


The first request is a POST request, with a payload, but you ignore the response.

            $.ajax({
                url: &#39;vender/show_comment.php&#39;,
                type: &#39;POST&#39;,
                data: {
                    page_id: page_id
                }
            });

The second request is a GET request, without a payload, and you drop the response into the all-comments element.

            $(&quot;#all-comments&quot;).load(&quot;vender/show_comment.php&quot;)

You haven't done anything to persist the data between two requests.

You could remove the $.ajax call entirely and make your load call a POST request and include the data there:

$(&quot;#all-comments&quot;).load(&quot;vender/show_comment.php&quot;, { page_id })

The data still won't be persisted for subsequent GET requests which is generally a desirable feature of comment systems.

To do that you'll need to store the data somewhere (a database is the usual choice) and then retrieve it in subsequent requests.

Rough pseudo-code would look something along the lines of:

if IS POST REQUEST
    if DATA IS NOT VALID
        respond with error
    else
        insert data into database
get data from database
generate html
respond with html

答案2

得分: -1

你必须等待回应:

			$.ajax({
				url: 'vender/show_comment.php',
				type: 'POST',
				data: { 'page_id' : page_id },
				success: function(response) {
				$("#all-comments").html(response);
				}
			});
英文:

You have to wait for the response:

		$.ajax({
			url: &#39;vender/show_comment.php&#39;,
			type: &#39;POST&#39;,
			data: { &#39;page_id&#39; : page_id },
			success: function(response) {
			$(&quot;#all-comments&quot;).html(response);
			}
		});

huangapple
  • 本文由 发表于 2023年5月14日 16:31:34
  • 转载请务必保留本文链接:https://go.coder-hub.com/76246552.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定