Jquery+ajax的简单使用

最新推荐文章于 2021-04-17 01:43:32 发布
最新推荐文章于 2021-04-17 01:43:32 发布
阅读量499 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanpingsoft/article/details/25708545
版权


//前台页面：

<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        function JqQueryPostTest() {
            $.ajax({
                type: "post",
                url: "Test.ashx?type=post",
                data: "username=lisi&&age=90",
                datatype: "text",
                success: function(data) {
                    alert(data);
                },
                error: function(data) {
                    alert("失败！");
                }
            })

        }
        function JqQueryGetTest() {
            $.ajax({
                type: "get",
                url: "Test.ashx?type=get",
                data: "username=lisi&&age=90",
                datatype: "text",
                success: function(data) {
                    alert(data);
                },
                error: function(data) {
                    alert("失败！");
                }
            })

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <input type="text" id="username" />
     <br />
     <input type="text" id="age" />
     <br />
     <input type="button" value="JqQueryGetTest" id="btn" οnclick="JqQueryGetTest();"/>
      <input type="button" value="JqQueryPostTest" id="Button1" οnclick="JqQueryPostTest();"/>
    <div id="result">
    </div>
    </form>
</body>


.ashx 页面

public class Test1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            context.Response.Write(CheckPost(context));

           
        }
        public string CheckPost(HttpContext context)
        {
            string lei = context.Request["type"];
            string re = string.Empty;
            if (lei == "get")
            {
                string name = context.Request["username"];
                string age = context.Request["age"];
                re = "get方式访问("+name+"--"+age+")";
            }
            if (lei == "post")
            {
                string name = context.Request["username"];
                string age = context.Request["age"];
                re = "post方式访问(" + name + "--" + age + ")";
            }
            return re;
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

区别的话，

总之，GET方式传送数据量小（1KB左右），处理效率高，安全性低，会被缓存，而POST相反

弹一曲温柔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery及ajax简单运用
钰团的博客
06-08 379
JQuery及ajax简单运用 首先简单的介绍一下JQuery它是一个轻量级的javascript类库， 我们只需要知道他们的功能，就能调用 我们写好就一个类“jQuery”，简写“”它的优点：1总是面向集合2多行操作集于一行我们先将jquery.min.jsjar包导入到自定位置并引用‘‘‘&lt;scripttype=&quot;text/javascript&quot...
jquery+ajax+ashx实现的一个简单ajax 效果
08-17 6360
     自己虽然以前也用ajax但总感觉那里觉得不对，以前ajax都是请求aspx页面，那页面多的数不清，自己也觉得很乱。自己最近在工作中，也觉得同事用的jquery+ashx用起来相当的简洁方便。帮在这里做了一个小的demo来       无标题页     function GetCategoryData(type) { al
Ajax-基础学习
qq_42964711的博客
05-14 142
Ajax 传统网站问题 网速慢的时候，页面加载时间长，用户只能等待。 表单提交后，如果内容不合适，需要重新填写表单所有内容。 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间。 Ajax是什么 可以页面无刷新更新数据，提高用户浏览网站体验。不刷新情况下像服务器请求数据。 Ajax应用场景 1.页面上加载更多数据 2.列表数据无刷新分页。 3.表单离开焦点数据验证，如验证邮箱是否已经注册。 4.搜索框提示下来列表。 Ajax运行环境 Ajax技术需要进行在网站环境中才能生效。把代码放
Ajax的原生用法
weixin_49301316的博客
11-03 197
1.Ajax的原生写法 说明: 原生ajax写法 $.ajax写法 jQuery的编程特点:函数式编程 $.ajax({ url : "/findAjax", type : "get", // data : { // "id" : 100, // "name" : "瞄" // } data:"id=100&name=瞄", success:function(result){ alert("请求成功!!!") for(let u
AJAX入门
m0_51400948的博客
04-17 120
1-创建AJAX对象 var xhr=new XMLHttpRequest(); 2-请求方式 xhr.open(“get”,“http://localhost:3000/ajax”) 3-发送请求 xhr.send() 4-获取服务器端响应到客户端的数据 xhr.οnlοad=function(){ console.log(xhr.responseText) } app.get(“ajax”,(res,req)=>{ res.send(字符串，或者对象) 返回的都是json字符串 }) JSON.
【Ajax编程】Ajax的基础知识
一文不值的博客
11-29 323
【Ajax编程】Ajax的基础知识，Ajax的概念、实现过程、函数的封装、请求限制及解决办法、jQuery下的Ajax方法、关于设计请求规范
js 方法格式 ，和ajax格式
qq_33416416的博客
04-15 361
ajax: $.ajax({ url : "../User/insertUserMange?name="+name+"&sex="+sex+"&age="+age, type : "post", dataType : "json", success : function(data) { alert(data.result); ...
jQuery+ajax简单实现文件上传的方法
01-19
本文实例讲述了jQuery+ajax简单实现文件上传的方法。分享给大家供大家参考，具体如下： 可以通过ajax来提交表单，而不会刷新页面。主要使用的方法是 $(“#formID”).ajaxSubmit()方法。 1、要引入js插件 需要下载的...
jQuery+ajax实现用户登录验证
10-14
在本文中，我们将深入探讨如何使用jQuery和Ajax技术来实现用户登录验证，这对于任何Web应用程序来说都是一个关键功能。这个过程通常涉及到客户端和服务器端的交互，以确保用户输入的有效性和安全性。 首先，让我们...
php+jQuery+Ajax简单实现页面异步刷新
10-21
JQueryAjax.html中的代码如下： ```html <title>JQueryAjax+PHP</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 用户名:...
基于JQuery的Ajax方法使用详解
11-30
如下所示： $.ajax的主要参数： url: '_请求的地址', type: 请求类型 get & post data: '请求的参数, success：回调函数 $.ajax({ url: '_api/01.check.php', type: 'get', data: 'name=' + $('inputName').val(), success: function (data) { console.log(data); } } }) jQuery的一些属性： $('xx').find(
idea工具，SSM+Shiro+Ajax+jQuery+Thymeleaf
08-15
比较实用的简单项目，适合练习数据库的增删改查，框架与技术：SSM+Shiro+Ajax+jQuery+Thymeleaf
Ajax与Controller数据交互
dianzhuxian2030的博客
02-11 1460
1.概念 在ssm框架下实现Ajax与Controller之间各种类型数据的数据交互,从Ajax传值和Controller返回值两个方面理解 1.1 从Ajax → Controller 无论Ajax以什么形式发送数据,在Controller中的接收方法都没有差异 对象操作key/value类型JSON序列化表单Ajax发送data:"name="+nam...
AJAX调用方式总结
Chrysler2015的博客
08-22 263
最近用了近两天的时间对AJAX的知识进行了一个梳理，觉得是时候对AJAX的相关知识点做个总结了.....这当然也就是本篇博客的主旨了....我也不是很赞成用长篇大论来讲述什么是AJAX，怎么使用AJAX，这样我总觉得太理论化了，接受起来会有一定的难度...所以，本篇博客的另一个主旨是：从实例入手，由浅到深.....好了，直接开始入手吧...在之前的一篇文章中讲解了《原生态AJ...
Ajax
weixin_33727510的博客
03-10 68
  CreateTime--2016年12月16日10:23:06Author:Marydon 一、get方式（问号）传参 　　（一）字符串拼接 　　拼接原则： 　　　　1.字符串用双引号或单引号包起来； 　　　　2.字符串拼接变量，用"+"； 　　　　3.多个参数的参数名之间用"&amp;"。 　　　　　　a.纯字符串拼接　　　　　　　　 var param = "...
jQuery中 ajax的使用
流楚丶格念的博客
04-01 5991
文章目录jQuery 中的 ajax1. $.ajax常用选项参数介绍：2. $.get3. $.post4. 全局事件处理 jQuery 中的 ajax jQuery 中有一套专门针对 AJAX 的封装，功能十分完善，经常使用，需要着重注意。 参考： http://www.jquery123.com/category/ajax/ http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp 1. $.ajax $.ajax({ url: './ge
servlet返回数据的方法
热门推荐
java_trainee的博客
12-13 2万+
servlet返回数据的方法 方法 1. RequestDispatcher.forward()界面跳转 HttpSession session =request.getSession(); Object obj = session.getAttribute (LoginConstants.LOGIN_USER); if (null !=...
jquery+ajax+json简单的登录注册
最新发布
06-01
好的，下面是一个简单的 jQuery、Ajax 和 JSON 实现的登录注册示例： HTML 代码： ```html <form id="loginForm"> <input type="text" name="username" placeholder="用户名"><br> <input type="password" name="password" placeholder="密码"><br> <button type="submit">登录</button> </form> <form id="registerForm"> <input type="text" name="username" placeholder="用户名"><br> <input type="password" name="password" placeholder="密码"><br> <input type="password" name="confirmPassword" placeholder="确认密码"><br> <button type="submit">注册</button> </form> ``` jQuery 代码： ```javascript $(function () { // 登录表单提交 $('#loginForm').submit(function (e) { e.preventDefault(); // 阻止表单默认提交行为 var data = $(this).serialize(); // 序列化表单数据 $.ajax({ url: '/api/login', type: 'POST', data: data, dataType: 'json', // 响应数据类型为 JSON success: function (response) { alert(response.msg); // 弹出响应消息 if (response.code === 0) { // 登录成功，跳转到首页 window.location.href = '/'; } }, error: function () { alert('网络错误，请稍后再试！'); } }); }); // 注册表单提交 $('#registerForm').submit(function (e) { e.preventDefault(); // 阻止表单默认提交行为 var data = $(this).serialize(); // 序列化表单数据 $.ajax({ url: '/api/register', type: 'POST', data: data, dataType: 'json', // 响应数据类型为 JSON success: function (response) { alert(response.msg); // 弹出响应消息 if (response.code === 0) { // 注册成功，跳转到登录页面 window.location.href = '/login'; } }, error: function () { alert('网络错误，请稍后再试！'); } }); }); }); ``` 后端接口代码（使用 Express 框架）： ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); // 模拟用户数据 let users = [ { username: 'admin', password: 'admin123' } ]; // 登录接口 app.post('/api/login', (req, res) => { const { username, password } = req.body; const user = users.find(u => u.username === username && u.password === password); if (user) { res.json({ code: 0, msg: '登录成功！' }); } else { res.json({ code: -1, msg: '用户名或密码错误！' }); } }); // 注册接口 app.post('/api/register', (req, res) => { const { username, password, confirmPassword } = req.body; if (username && password && confirmPassword && password === confirmPassword) { const user = users.find(u => u.username === username); if (user) { res.json({ code: -1, msg: '用户名已存在！' }); } else { users.push({ username, password }); res.json({ code: 0, msg: '注册成功！' }); } } else { res.json({ code: -1, msg: '参数错误！' }); } }); app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 注意，这只是一个简单的示例，实际应用中还需要进行参数校验、加密等操作，以确保安全性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值