XMLHttpRequest使用onReadyStateChange

时间:2019-04-03 19:43:29

标签: javascript node.js express xmlhttprequest

目前是什么样?

我有一个配置文件页面,当它被加载到服务器上以接收来自用户的配置文件数据时,它会发出POST请求。它将数据放入输入中,以便用户可以修改它们。然后在底部,我有一个按钮,用于将表单中的数据发送回服务器以更新用户的数据。现在,我想将某种确认发送回客户端,以通知用户数据已成功更新。所以这就是目前的样子。

On page load:
client -> server (post the userid)
server -> client (send the user data corresponding to the userid)
On button press:
client -> server (post the new user data)
server -> client (confirmation of the update)

我该怎么用?

我正在使用javascript客户端。服务器端,我在Express中使用Node.js。

问题和代码

页面加载中发生的事情非常正常。客户端响应的最后一个服务器发送一个带有{Type: 1}的json,它在浏览器上按原样打印出来,这不是我想要的,我认为这是因为XMLHttpRequest没有第二次触发。我想抓住这个问题,以便对此做出适当的答复。

var xhp = new XMLHttpRequest();
xhp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        if (data.type == 0) {
            console.log(data);
            createProfileDiv(data);
        } else if (data.type == 1) {
            alert("Successfully edited your profile");
        }
    }
};
xhp.open("POST", "getProfile", true);
xhp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhp.send("id=" + getCookie("userId"));

这是个人资料页面的代码。我正在尝试使用此代码来区分data.type,因此0是接收配置文件数据,而1是接收成功消息。

exports.getProfile = function(req, res) {
    let db = new sqlite3.Database('database', sqlite3.OPEN_READ, (err) => {
        if (err) {
            console.error(err.message);
        }
    });

    var profile = {};
    db.get(`SELECT * FROM Customers WHERE customer_id = (?);`, [req.body.id], (err, row) => {
        if (err) {
            console.error(err.message);
        }
        profile = row;
    });

    db.close((err) => {
        if (err) {
            console.error(err.message);
        } else {
            profile.type = 0;
            res.send(profile);
        }
    });
}

exports.updateProfile = function(data, res) {
    let db = new sqlite3.Database('database', sqlite3.OPEN_READ, (err) => {
        if (err) {
            console.error(err.message);
        }
    });
    db.get('UPDATE Customers SET name=(?), password=(?), email=(?), address=(?), city=(?), zip_code=(?), birthdate=(?) WHERE email=(?);',
    [data.body.name, data.body.password, data.body.email, data.body.address, data.body.city, data.body.zipcode, data.body.birthdate, data.body.email],
    (err, row) => {
        if(err) {
            return console.log(err.message);
        }
    });
    db.close((err) => {
        if (err) {
            console.error(err.message);
        } else {
            var obj = {type: 1};
        res.status(200);
        res.send(obj);
        }
    });
}

第一个功能getProfile从数据库中获取数据,然后将其与类型0一起发送给客户端,第二个功能'updateProfile'从数据库中更新数据,然后将类型1消息发送给客户端。客户端,以确认更新成功。从字面上看,我支持客户的是一个白页,上面写着:“ {type:1}”,但是没有调用onreadystatechange吗?

问题

所以我的问题是。我是否在做一些完全愚蠢的事情,如果是的话,我应该怎么做?否则为什么我的onreadystatechange没有被第二次要求更新配置文件请求?

1 个答案:

答案 0 :(得分:0)

谢谢Charlietfl的回答。 我这样做的方法是阻止默认表单提交,并使用xmlhttprequest使请求发送。

<configuration>
  <system.webServer>
    <aspNetCore .....>
      <environmentVariables>
        <environmentVariable name="ASPNETCORE_ENVIRONMENT" value="Development" />
      </environmentVariables>
    </aspNetCore>
  </system.webServer>
</configuration>