Nodejs求问关于$.ajax()的前后端具体实现方法

Nodejs求问关于$.ajax()的前后端具体实现方法

我这两天在学习ajax，但总是不成功，下面是具体的前后端代码 前端： <button onclick = “mySubmit()”>登录</button>

function mySubmit(){ var params = { “user_id”: “testid”, “password”: “testpwd” }; $.ajax({ url: ‘/login’, type: ‘post’, data: params, datatype: ‘json’, success: function(){ allert(‘hai’); }, error: function(XMLHttpRequest, textStatus, errorThrown){ alert(XMLHttpRequest + ‘#’ + textStatus + ‘#’ + errorThrown); }, complete: function(a,b){ alert(a + ‘complete#’ + b); } }); }; 后端： app.post(’/login’,user.doLogin); （下面的exports是在user里面的) exports.doLogin = function(req,res){ console.log("come here " + req.body.user_id + “#” + req.body.password); res.writeHead(200, { ‘Content-Type’: ‘application/json’, ‘Access-Control-Allow-Origin’ : ‘*’ }); res.json({“success”:1}); res.end(); }; 在前端点击button后，后端命令行中有输出"come here testid # testpwd" 但前端总是回调error方法，alert框里是[object object] #error# 然后再调用complete方法，alert框里是[object object] #error 求问这是哪里写错了啊? 我是新手，请大家多指教！


6 回复

根据你的描述和提供的代码片段，前端和后端都有一些问题需要解决。以下是一些可能的原因及修正后的代码。

前端代码

  1. 拼写错误：alert 应该是 alert，而不是 allert。
  2. 拼写错误：datatype 应该是 dataType。
  3. 字符串引号：使用英文双引号 " " 而不是中文引号 “ ”。
  4. AJAX 请求的错误处理：确保错误信息可以正确显示。
<button onclick="mySubmit()">登录</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function mySubmit() {
    var params = {
        "user_id": "testid",
        "password": "testpwd"
    };
    
    $.ajax({
        url: '/login',
        type: 'POST',
        data: params,
        dataType: 'json',
        success: function(response) {
            alert('Success: ' + JSON.stringify(response));
        },
        error: function(xhr, textStatus, errorThrown) {
            alert('Error: ' + xhr.status + ' - ' + textStatus + ' - ' + errorThrown);
        },
        complete: function(xhr, status) {
            alert('Complete: ' + xhr.responseText + ' - ' + status);
        }
    });
}
</script>

后端代码

  1. 拼写错误：req.body.user_id 和 req.body.password 需要确保请求体已经被解析为 JSON。
  2. CORS 设置：确保 CORS 设置正确，以便允许跨域请求。
const express = require('express');
const bodyParser = require('body-parser');

const app = express();

// 使用中间件解析 JSON 请求体
app.use(bodyParser.json());

app.post('/login', (req, res) => {
    console.log("come here " + req.body.user_id + "#" + req.body.password);
    
    // 设置响应头
    res.setHeader('Content-Type', 'application/json');
    res.setHeader('Access-Control-Allow-Origin', '*');
    
    res.json({"success": 1});
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. 前端：

    • 使用 jQuery 的 $.ajax 方法发送 POST 请求到 /login。
    • dataType: 'json' 指定服务器返回的数据类型为 JSON。
    • 在 error 回调中，我们显示了错误状态码、文本和异常信息，以帮助调试。

  2. 后端：

    • 使用 Express 和 body-parser 中间件来解析 JSON 请求体。
    • 设置响应头以允许跨域请求。
    • 返回一个 JSON 对象作为响应。

通过这些修改，你应该能够解决前端和后端之间的通信问题，并且能正确处理 AJAX 请求的响应。


我觉得你要先看看console.log后面的是否都正常走完，如果正常走完，再去前端的error和complete打上断点查看内容，这样至少不会是[object object]，起码你能知道他的错误提示。 然后最好再加上一个抓包工具查看一下，ie下的httpwatch之类的工具，看看是不是有一些乱七八糟的东西。头是不是对的。

最最后，我在用node的ajax时，直接用res.send(jsonStr),你可以先试试res.send能不能成功

require('uitl').inspect(json)可以帮助你看到object的具体信息，这样才好调试的。

发错了 是 require('util').inspect(json)

前端是写在.ejs文件里面的吗？我的<button onclick = “mySubmit()”>点击的时候没有进函数mySubmit

根据你的描述，问题可能出在以下几个方面：

  1. 拼写错误：你在前端代码中使用了 allert 而不是 alert。
  2. 拼写错误：在 dataType 中，正确的拼写是 dataType 而不是 datatype。
  3. 网络请求失败：虽然后端能够正确处理请求并返回数据，但前端 AJAX 请求可能由于某些原因（例如 CORS 等）失败。

以下是修改后的代码示例：

前端代码

<button onclick="mySubmit()">登录</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function mySubmit() {
    var params = {
        "user_id": "testid",
        "password": "testpwd"
    };
    $.ajax({
        url: '/login',
        type: 'POST',
        data: params,
        dataType: 'json', // 注意这里拼写正确
        success: function(response) {
            alert('成功: ' + JSON.stringify(response));
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert('失败: ' + XMLHttpRequest.status + ' ' + textStatus + ' ' + errorThrown);
        },
        complete: function(a, b) {
            alert('完成: ' + JSON.stringify(a) + ' ' + b);
        }
    });
}
</script>

后端代码

const express = require('express');
const app = express();
app.use(express.json()); // 用于解析 JSON 格式的数据

app.post('/login', (req, res) => {
    console.log("come here " + req.body.user_id + "#" + req.body.password);
    res.writeHead(200, {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*' // 允许所有来源跨域访问
    });
    res.json({"success": 1});
    res.end();
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

关键点

  1. 确保前端和后端的 dataType 和 Content-Type 配置一致。
  2. 使用 express.json() 解析前端发送的 JSON 数据。
  3. 确保 Access-Control-Allow-Origin 头允许跨域请求。

通过这些调整，你应该能够看到正确的 success 回调而不是 error 回调。如果仍然有问题，请检查浏览器控制台中的详细错误信息。

回到顶部