js 接收form表单响应

一、可直接运行的示例：

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html><head><title>test</title></head>
<form id="myForm">
  <label for="myName">告诉我你的名字：</label>
  <input id="myName" name="name" value="小明" />
  <input type="submit" value="提交" />
</form>
<body>
<script>
window.addEventListener("load", () => {

  // 获取表单元素
  const form = document.getElementById("myForm");

    // 接管表单的 submit 事件
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    sendData();
  });

  function sendData() {
    const XHR = new XMLHttpRequest();

    // 把这个 FormData 和表单元素绑定在一起
    const FD = new FormData(form);

    // 定义成功时发生的事件
    XHR.addEventListener("load", (event) => {
      alert(event.target.responseText);
    });

    // 定义失败情形下发生的事件
    XHR.addEventListener("error", (event) => {
      alert("哎呀！出了一些问题。");
    });

    // 设置请求
    XHR.open("POST", "http://127.0.0.1:8888/edu.jsp");

    // 发送的数据是由用户在表单中提供的
    XHR.send(FD);
  }

});
</script>
</body>
</html>

 二、一次实践运用

总结：window.addEventListener放在循环里执行会异常，循环几次，请求服务器多少次（本来希望只请求服务器一次）

window.addEventListener("load", () => {
    const form = document.getElementById("form");
    form.addEventListener("submit", (event) => {
        event.preventDefault();

        const XHR = new XMLHttpRequest()
        const FD = new FormData(form)
        XHR.addEventListener("load", (event) =>
            let zrwrs = event.target.responseText;
            let lines = zrwrs.split("\n"); //按行读取

            for (let j=0;j<lines.length;j++) {
               if(lines[j] != null && lines[j] != "" && lines[j].includes("提示")) {
                    var myrs = lines[j+2].trim();
                    console.info(myrs);
                    return;
               }
            }
        });
        XHR.addEventListener("error", (event) => {
          alert("哎呀！出了一些问题。");
        })
        XHR.open("POST", "https://manager.sxtdzy.cn/u.php/member-login", false)
        XHR.send(FD);
    });
});

 

 

 

 
posted @ 2024-04-28 10:56  zhuangrunwei  阅读(113)  评论(0)  编辑  收藏  举报