AJAX POST XMLHttpRequest javascript和php无法保存到文本文件中

时间:2014-07-18 17:22:27

标签: javascript php ajax post xmlhttprequest

我正在尝试将在html文本框中输入的数据发送到javascript。然后通过ajax我将数据发送到PHP,以便它可以保存在文本文件中。问题是ajax 确实将它自己引导到php,但是php没有收到数据。所以每次在表单上输入数据时,文本文件都会缩进。这意味着它将空值添加到文本文件中。我应该怎么做才能让php能够接收javascript发送的数据?

HTML

<html lang="en">
<head>
        <meta charset="utf-8"/>
        <link href="list.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
        </script>
        <script src="list_java.js" type="text/javascript">
        </script>
    </head>

<h1> 
<center><input id="box" type="textbox"  name="box" value="Enter Movie:"  />  <input id="add" type="submit" value="" onClick="addStuff();" /> </center>

</h1>

    <body>
        <div id="status" ></div>
        <h2>MOVIE NAME:  </h2> <h3>      LIKES </h3>
            <ul id ="list" name="list">
        </ul>   
        <ul id ="likes_list" name="likes_list">
        </ul>   

    </body>

</html> 

JAVASCRIPT

    function addStuff()
        {
        var f=1;
        var movie_name_entered=document.getElementById("box").value;
        var movieList= document.getElementById("list"); //get the list from html

         $("#list li_a").each(function () {
  var thisVal = $(this).text();

  if ( (thisVal ==movie_name_entered) ) 
  {
     alert("Sorry this movie already exists in the list");
      f=0;
      return false;
  }
   /* var hr= new XMLHttpRequest();
    var url= "http://localhost/php_bollywood_romance.php ";
    var vars='movie_name_entered=' + movie_name_entered;
    hr.open("POST",url,true);
    hr.setRequestHeader("Context-type","application/x-www-form-urlencoded");//// Set content type header information for sending url encoded variables in the request
    hr.send(vars);
    hr.onreadystatechange= function()
    {
        if(hr.readyState==4 && hr.status==200)
        {
            var return_data=hr.reponseText;
            document.getElementById("status").innerHTML=return_data;
        }
    }*/
})


 if(f==0)
    return false;    


    var new_movie_element = document.createElement("li_a");
    var new_list_value=document.createTextNode(movie_name_entered);
    new_movie_element.appendChild(new_list_value); //put value in element
    //new_movie_element.setAttribute("href", "trailer.html");
    movieList.appendChild(new_movie_element); //put element in the old list



    // -----------------adding likes button

     var likes_list=document.getElementById("likes_list");
     var likes_Button = document.createElement("like");

     likes_Button.style.backgroundImage="url('pop.png')";

     var count=1;
     var counter_value=document.createTextNode(count);
     likes_Button.appendChild(counter_value);
     likes_Button.onclick=function()
     {
        var now= parseInt(counter_value.nodeValue);
        counter_value.nodeValue=now+1;
     }
     //put value in element
    //Assign different attributes to the element. 
    likes_list.appendChild(likes_Button);



    var hr= new XMLHttpRequest();
    var url= "http://localhost/php_bollywood_romance.php ";
    //var url="php_bollywood_romance.php";
    hr.open("POST",url,true);
    hr.setRequestHeader("Context-type","application/x-www-form-urlencoded");//// Set content type header information for sending url encoded variables in the request
    hr.send("film=movie_name_entered&like=count");
    hr.onreadystatechange= function()
    {
        if(hr.readyState==4 && hr.status==200)
        {
            var return_data=hr.reponseText;
            document.getElementById("status").innerHTML=return_data;
        }
    }

    document.getElementById("status").innerHTML = "processing...";
}

PHP

              <?php

                  {
                     $name = $_POST["film"];
                     $file ='data_bollywood_romance.txt';
                      $current=file_get_contents($file); //gets existing content from the file
                     $current ="$current \n $name \n";
                      file_put_contents($file,$current); //put newstuff
                      return 'yes';
                      }

                   ?>

提前谢谢!!!

2 个答案:

答案 0 :(得分:0)

查看显示格式正确的帖子的this SO response。看起来你错过了内容长度标题。您可能需要以下内容。

hr.setRequestHeader("Content-length", "film=movie_name_entered&like=count".length);

好的措施

hr.setRequestHeader("Connection", "close");

完成后关闭连接。

如示例所示,使用param变量可能会让生活更轻松。这样你就可以设置内容长度标题,而不必直接输入参数。

var param = "film=movie_name_entered&like=count";
hr.setRequestHeader("Content-length", param.length);
hr.setRequestHeader("Connection", "close");
hr.send(param)

答案 1 :(得分:0)

正如我所知,你正在使用jquery为什么不使用$ .ajax()或$ .post()而不是编写大量代码。并且您需要将输入按钮从type =“submit”更改为type =“button”以防止它以正常方式提交表单并加载页面。