个人中心
gpt4 book ai didi

ajax - 如何使用 AJAX 将数据发送到 'post.php'？ (没有Jquery)

转载 作者：行者123 更新时间：2023-12-04 05:04:35 24 4
gpt4 key购买 nike

我是这个 webdeveloper 问题的新手。我已经制作了一个表单，我使用 Ajax (JQuery lib) 创建了一个聊天框。

现在，我想尝试在不使用 Jquery 的情况下做类似的事情来了解 Ajax 的工作原理。首先，我只想使用 AJAX 在 log.html 上写我的消息，然后我可以稍后阅读它们。但我不明白为什么我不能将我的 textarea 数据发送到 post.php。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Teste</title>

        <script type="text/javascript">

    function sendXMLDoc(){

         var xmlhttp;

        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari           
            xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5       
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }


        var message=document.getElementById('msg').value;

        xmlhttp.open("POST", "post.php", false);

         xmlhttp.onreadystatechange = function() {//Call a function when the state changes.

            if(xmlhttp.readyState == 0 ) {
                    alert("UNSENT");
            }
            if(xmlhttp.readyState == 1 ) {
                    alert("OPENED");//check if the data was revived successfully.
            }
            if(xmlhttp.readyState == 2 ) {
                    alert("Headers Received");//check if the data was revived successfully.
            }
            if(xmlhttp.readyState == 3 ) {
                    alert("Loading response entity body");//check if the data was revived successfully.
            }

            if(xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    alert("Data transfer completed");//check if the data was revived successfully.

                    }
            }
        }

        xmlhttp.send(message);        
   }

   </script>

xmlhttp.send(data) :为什么我不将我的数据发送到 post.php？

Post.php 是我写 log.html 的地方(但我不能发送我的消息，我不明白为什么): 
<?php

    $text = $_POST['message'];  // WHY I CAN'T RECEIVE MY POSTED MESSAGE?
    $fp = fopen("log.html", 'a');
    fwrite($fp, "<div>\n(".date("g:i A").")<br>".$text."<br>\n</div>\n");
    fclose($fp);

?>

这是我的 form.html 
<body>
    <h1>Insert text on log.html</h1>

    <form method="post" onsubmit="sendXMLDoc();">       
    <textarea name="message" maxlength="196" rows="8" ></textarea>
    <br>
    <input type="submit" value="Send"/> 
    </form>



</body>

最佳答案

你看了吗this link ?

似乎对如何使用PHP和MySql构建AJAX请求有完整的解释。

编辑:

您的代码中的问题都出在 post.php 上，它的语法不正确(在最后一个 <br> 之前缺少双引号)，应该是这样的:

后.php

<?php 
    $text = $_POST['message'];  
    $fp = fopen("log.html", 'a');
    fwrite($fp, "<div>\n(".date("g:i A").")<br>".stripslashes(htmlspecialchars($text))."<br>\n</div>\n");
    fclose($fp);

?>

和请求 header ，它应该设置内容类型(见下面的代码)

我基于 w3.org 这个答案.

此处提供的最终 html 将帮助您了解 Ajax 请求在不同浏览器上的行为。试试看。

似乎对于 Firefox 加载请求，您需要在 Status 为 OPENED (1) 时做一些事情，我不太明白为什么。

在不同的浏览器上尝试此代码以查看 XMLHttpRequest 的不同方法。 
<!DOCTYPE html>
<html>

<head>
<script language="javascript" type="text/javascript">



function sendXMLDoc(obj){


        var message=obj["message"].value;
        var data = "message=" + message; 
        var xmlhttp;
        try{
           // Opera 8.0+, Firefox, Safari
           xmlhttp = new XMLHttpRequest();
         }catch (e){
           // Internet Explorer Browsers
           try{
              xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
           }catch (e) {
              try{
                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
              }catch (e){
                 // Something went wrong
                 alert("Your browser broke!");
                 return false;
              }
           }
         }       

        url = "http://localhost/AjaxPhp/post.php"

        xmlhttp.open("POST", url , true);
        xmlhttp.onreadystatechange = display_data;
        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  

        xmlhttp.send(data);

        function display_data() {

            if(xmlhttp.readyState == 1 ) {
                    alert("OPENED");//check if the data was revived successfully.
            }
            if(xmlhttp.readyState == 2 ) {
                    alert("Headers Received");//check if the data was revived successfully.
            }
            if(xmlhttp.readyState == 3 ) {
                    alert("Loading response entity body");//check if the data was revived successfully.
            }

            if(xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    alert("Data transfer completed");//check if the data was revived successfully.
                    }
            }
        }
 } 


</script>
</head>

<body>
    <h1>Insert text on log.html</h1>

    <form method="post" onsubmit="sendXMLDoc(this);">       
    <textarea name="message" maxlength="196" rows="8" ></textarea>
    <br>
    <input type="submit"/> 
    </form>


</body>
</html>

我并不真正理解原因，但根据 w3 ，根据我的理解，请求的顺序应该是:

OPENED(在调用 open 方法之后)、HEADERS_RECEIVED(在 setRequestHeader 之后)、LOADING(收到请求体)。 DONE(数据传输完成，发送后)。

Chrome 处理 post.php 但不显示任何警告框(也许是我的弹出设置，也许不是)

IE 仅显示 OPENED 警报消息
Firefox 显示“接收到 header ”、“数据传输完成”、“打开”、“数据传输完成”。

希望这有助于更多地理解它。总是去检查 w3.org为网络上的最终来源。它可能不是非常用户友好和直观，但提供了一些关于原因和应该的提示。

关于ajax - 如何使用 AJAX 将数据发送到 'post.php'？ (没有Jquery)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15690977/

24 4 0
文章推荐： ember-data - 如何将 ember-rails 的 ember-data 版本升级到修订版 12？
文章推荐： three.js - 在three.js中围绕自己的轴旋转相机
文章推荐： autocad - 如何将AutoCAD绘图转换为图像？
文章推荐： f# - 有没有办法将 llvm 位码加载到 Mono (F#)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com