JSON 和 Ajax:使用 XMLHttpRequest 方法发送数据


#1

https://learn.freecodecamp.one/data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method

题目要求:更新代码以创建并发送 “POST” 请求。然后在输入框中输入你的姓名,你的 AJAX 函数会用服务器返回的数据替换 “Reply from Server will be here”。在这种情况下,你的名字附加 “爱猫”。

  <script>
  document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('sendMessage').onclick=function(){    
      var userName=document.getElementById('name').value;
      req=new XMLHttpRequest();
      req.open("POST",url,true);
      req.setRequestHeader('Content-Type','text/plain');
      req.onreadystatechange=function(){
        if(req.readyState==4&&req.status==200){
          document.getElementsByClassName('message')[0].innerHTML=req.responseText; } };
      req.send(userName);  
    };
  });
</script>
<style>
  body {
    text-align: center;
    font-family: "Helvetica", sans-serif;
  }
  h1 {
    font-size: 2em;
    font-weight: bold;
  }
  .box {
    border-radius: 5px;
    background-color: #eee;
    padding: 20px 5px;
  }
  button {
    color: white;
    background-color: #4791d0;
    border-radius: 5px;
    border: 1px solid #4791d0;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    background-color: #0F5897;
    border: 1px solid #0F5897;
  }
</style>
<h1>Cat Friends</h1> 
<p class="message box">
  Reply from Server will be here
</p>
<p>
  <label for="name">Your name:
    <input type="text" id="name"/>
  </label>
  <button id="sendMessage">
    Send Message
  </button>
</p>

上代码测试虽然能通过,但点按钮后为什么并没有返回“名字+爱猫”的结果呢?预览窗口没反应?
open方法中的外部资源的url题目中也没说

谢谢回答~


#2

(index):1 Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://js.stripe.com’) does not match the recipient window’s origin (‘https://learn.freecodecamp.one’).

打开console会有这么一段话,这是因为这道题目很古老了,以至于https://js.stripe.com已经无法使用。这道题的测试是与https://js.stripe.com无关的


#3

谢谢回答~那好吧,开发志愿者大大们要加油了~一个需要更新维护的题目~~~