nodejs ajax

最新推荐文章于 2023-11-04 16:52:06 发布
最新推荐文章于 2023-11-04 16:52:06 发布
阅读量376 收藏
点赞数
分类专栏： Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/novjam/article/details/102884017
版权
这篇博客展示了如何使用JavaScript的jQuery库实现一个简单的AJAX登录表单，当用户点击登录按钮时，通过POST请求将用户名和密码发送到Node.js服务器。服务器端使用http模块接收并验证数据，如果用户名和密码正确，返回'登录成功'，否则返回'登录失败'。
摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/login.css"/>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/login.js" type="text/javascript" charset="utf-8"></script>
        <title></title>
    </head>
    <body>
        <table border="0" cellspacing="10px" cellpadding="0" id="tb_login">
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="username" id="username" value="" placeholder="输入用户名" /></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="password" id="password" value="" placeholder="输入密码"/></td>
            </tr>
            <tr>
                <td colspan="2">
                    <button type="button" id="btn_login">登录</button>
                </td>
            </tr>
        </table>
    </body>
</html>

$(function(){
    $("#btn_login").click(function(){
        var username = $("#username").val();
        var password = $("#password").val();
        if(username == ""){
            alert("用户名不能为空");
        }
        if(password == ""){
            alert("密码不能为空");
        }
//         $.post("http://127.0.0.1:8800/login",
//         {
//             username:username,
//             password:password,
//         },
//         function(data,status){
//             alert("sucess");
//         });
        var data = {'username':username,'password':password};
        $.ajax({
            type:'post',
            url:'http://127.0.0.1:8800/login',
            // contentType:'application/json;charset=utf-8',
            data:JSON.stringify(data),
            // dataType: 'json',
            success:function(data){
                alert(data);
                if(data == "登录成功"){
                    sessionStorage.setItem("username",username);
                    document.location.href = 'welcome.html';
                    
                }
            },
            error:function(){
                alert("error");
            }
        });
    });
});
 

var http = require("http");
var querystring = require("querystring");
var util = require("util");
http.createServer(function(req,resp){
    var post = "";
    resp.writeHead(200,{'Content-Type':'text/plain'});
    req.on("data",function(chunk){
        post += chunk;
    });
    
    req.on("end",function(){
        resp.writeHead(200,
        {
            "Content-Type":"text/plain",
            "Access-Control-Allow-Origin":"http://127.0.0.1:8888",
            "Access-Control-Allow-Headers":"Content-Type,Content-Length, Authorization, Accept,X-Requested-With",
            "Access-Control-Allow-Methods":"PUT,POST,GET,DELETE,OPTIONS"
        });
        postObj = eval("("+ post +")");
        if(postObj.username == "admin" && postObj.password == "123456"){
            resp.write("登录成功");
        }else{
            resp.write("登录失败");
        }
        resp.end();
    });
}).listen("8800");

 

NOV_JAM
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax之xhr数据请求(基于Node.js平台)
qq_41646358的博客
09-03 2768
  什么是Ajax? Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。 Ajax数据请求方式的特点: 1.客户端可以发送数据到服务端 2.客户端可以接收并解析服务端传过来的数据 3.可以对...
NodeJs之Ajax技术
十三阿哥的博客
06-01 792
参数传递 Ajax状态码 init 模拟测试 init 测试 。 gitee地址 效果演示
node.js中的ajax
qq_56507133的博客
11-04 76
【代码】node.js中的ajax。
nodejs实现用户登录注册---前台通过ajax请求数据
maidu_xbd的博客
01-23 5162
1.通过http模块创建服务器，并监听端口8080 const http = require('http'); var server = http.createServer(function (req, res){}); server.listen(8080); 2.解析数据 通过‘querystring’和'url'模块解析数据 req.on('data', function (d...
node.js Ajax登录学习
Tiny2017的博客
05-06 256
node.js Ajax登录学习 下载安装node.js，参考链接Node.js 安装配置 采摘自菜鸟驿站 简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。 Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常...
ajax+nodejs教材代码
最新发布
12-26
**Ajax与Node.js结合应用详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。Ajax的核心...
nodejs-ajax-crud
01-28
**标题解析：** "nodejs-ajax-crud" 这个标题表明我们将探讨一个基于Node.js的项目，它涉及使用Ajax进行CRUD（创建、读取、更新和删除）操作。Node.js是一个流行的JavaScript运行环境，它允许开发者在服务器端使用...
nodejs+ajax用js实现前端后台demo
03-17
在本文中，我们将深入探讨如何使用Node.js和Ajax来实现一个简单的前端-后端交互的示例。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者使用JavaScript进行服务器端编程。Ajax（Asynchronous ...
Jquery通过ajax请求NodeJS返回json数据实例
01-19
最近看了NodeJS相关的，在网上查了下结合AJAX的应用，感觉应用前景还是不错的。为什么用这个组合呢？ 1.NodeJS不需要安装，拷贝过去就可以使用，而环境变量可以只配置在当前cmd窗口，运行方便。 2.通过HTML的ajax...
ajax +NodeJS 实现图片上传实例
10-19
在本文中，我们将深入探讨如何使用Ajax和Node.js结合实现图片上传功能。首先，我们要明白Ajax是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术，而Node.js则是一个基于Chrome V8引擎的...
ajax 与 node 的前后台交互
jiaoqi6132的博客
02-22 190
服务端： const http = require("http"); const fs = require("fs"); const url = require("url"); const querystring = require("querystring"); let data = '成功开启服务'; fs.writeFile('文件.txt', data, 'utf8',(err) ...
node.js作为后端发布接口，前端使用ajax访问，简单应用示例
weixin_42359607的博客
08-31 1801
node.js、html、jQuery
nodejs模仿ajax请求
逛街的喵啊
11-23 4481
'use strict' const fs = require("fs"); const http = require("http"); var Url = require("url"); var querystring = require('querystring'); var defaultSetting = { url:null, //request url data:null, //
用jquery的ajax请求nodejs
热门推荐
jijun7885417的专栏
03-22 1万+
下午看了会儿nodejs,在想如果用ajax去请求nodejs服务器的数据应该怎么做。通过找些资料算是大概明白了。前端js$.ajax({ url: 'http://127.0.0.1:3000/', //请求的是3000端口，应该属于跨域调用，因此dataType用jsonp dataType: "jsonp", //jsonpCallback: "_test"
node 发出ajax请求_使用Node发出HTTP请求
cuk0051的博客
08-27 878
node 发出ajax请求I use the term HTTP, but HTTPS is what should be used everywhere, therefore these examples use HTTPS instead of HTTP. 我使用HTTP一词，但是HTTPS是应该在所有地方使用的术语，因此这些示例使用HTTPS代替HTTP。 执行GET请求 (Perfor...
nodejs-express接收ajax请求
IT藏经阁:收集各种精华帖
08-05 4377
index.ejs function ajax(){ $.ajax({ url: "/ajax", type: "GET", dataType: "json", data: {
node.js 处理ajax get和post信息
角角兔的博客
08-14 4183
node.js 处理get请求 要做的准备工作 1.express依赖包 2.url模块 用于对url格式的字符串进行解析，返回一个对象。根据不同的url进行处理，返回不同的数据。 创建js文件:getApi.js /*引用模块*/ var express = require('express'); var app = express(); var url = require('url...
nodejs+ajax+mysql +html实现数据传输
前端开发-陈善强
11-16 2812
打开俩个服务器:apache和nodejs 1、在apache服务器中运行html，html代码如下： 图上是打开nodejs服务器后，连接数据库，执行数据查询，在apache服务器打开网页数据请求成功后，显示效果 <!DOCTYPEhtml> <htmllang="en"> <head> <meta charset="UTF-8"...
ajax和nodejs
07-27
Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它通过在浏览器和服务器之间进行异步通信，实现在不刷新整个页面的情况下更新部分页面内容的能力。通过使用Ajax，可以实现动态...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值