使用Javascript向服务器发出Ajax请求

时间:2020-10-29 17:54:15

标签: javascript php ajax

我正在制作类似于JSbin / JS小提琴的应用程序。当用户单击带有用户在文本区域中键入的值的保存代码按钮时,我想向服务器发出ajax请求以更新我的数据库。 有人可以帮我吗。我不知道怎么了,我的数据库没有更新为textarea内容。我只想使用纯JavaScript

MY HTML code




<main>
  <form id="myform" method="post">
    <div id="bodyContainer">
      <div class="Panels" id="HtmlPanel">
        <textarea
          id="html"
          name="html"
          placeholder=" ENTER HTML CODE HERE"
        ></textarea>
      </div>
      <div class="Panels hidden" id="CssPanel">
        <textarea
          id="css"
          name="css"
          placeholder=" ENTER CSS CODE HERE"
        ></textarea>
      </div>
      <div class="Panels hidden" id="JsPanel">
        <textarea
          id="js"
          name="js"
          placeholder=" ENTER JAVASCRIPT HERE"
        ></textarea>
           </div>
              <iframe class="Panels" id="OutputPanel" placeholder="Output"></iframe>
           </div>
          </form>
          </main>

       button HTML:<button onclick="SaveCode()" type="submit" id="save-code-btn" name="save-code">
        Save Code
      </button>

JAVASCRIPT:

  function SaveCode(){  const request = new XMLHttpRequest();
    
    const requestData = {
    html: document.getElementById("html").value,
    css: document.getElementById("css").value,
    js: document.getElementById("js").value,
  };
    request.onreadystatechange = function() {
    // Check if the request is compete and was successful
    if(this.readyState === 4 && this.status === 200) {
        alert("Succesful")
    }
};
    request.open("post", "SaveCode.php",true);
    request.setRequestHeader(
      "Content-type",
      "application/x-www-form-urlencoded"
    );
    request.send("html="+requestData.html);
  }


PHP CODE(SaveCode.php)
  <?PHP
  session_start();
   include('DBconnection.php');
   if($_SERVER['REQUEST_METHOD']=='POST'){
   $html = mysqli_real_escape_string($_POST['html']);
   $query= 'UPDATE users details SET html="'.$html.'"WHERE 
     id="'.$_SESSION['id'].'"';
     $result= mysqli_query($connection, $query);
     if($result){
     echo "Success";
      }else{
      echo "Fail";
       }   


      }
       ?>

1 个答案:

答案 0 :(得分:1)

如果在本地计算机上进行操作,则应在某些php服务器上运行文件,例如Openserver或lamp。

并尝试将您的网址更改为类似的内容:

http://localhost/SaveCode.php

http://127.0.0.1/SaveCode.php

如果在本地计算机上进行测试,希望这对您有帮助