jquery异步post几种方式

最新推荐文章于 2022-12-07 18:01:22 发布
最新推荐文章于 2022-12-07 18:01:22 发布
阅读量550 收藏 1
点赞数
文章标签： ajax html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30852577/article/details/103194256
版权

AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

一、表单形式ajax提交

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
  <link href="/static/css/style.css" rel="stylesheet" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="ajax方式">
    <script src="/static/js/jquery-1.11.2.min.js"></script>
  <script src="/static/js/cytoscape.min.js"></script>		
  <script src="/static/js/cytoscape-qtip.js"></script>
    <script type="text/javascript">
        function login() {
            $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/graph" ,//url，服务器网址
                data: $('#form1').serialize(),//表单中需要要后台服务器提交的内容
                success: function (result) {//前端对于服务器返回数据的操作函数
                    console.log(result);
                    alert（‘成功’）,
                error : function() {
                    alert("异常！");
                }
            });
        }
    </script>
</head>
<body>
<div id="form-div"> //form表单实现方式
    <form id="form1" onsubmit="return false" action="##" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登录" onclick="login()">&nbsp;<input type="reset" value="重置"></p>
    </form>  
</div>
</body>
</html>

二、非表单post函数形式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
  <link href="/static/css/style.css" rel="stylesheet" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="ajax方式">
    <script src="/static/js/jquery-1.11.2.min.js"></script>
  <script src="/static/js/cytoscape.min.js"></script>		
  <script src="/static/js/cytoscape-qtip.js"></script>
    <script type="text/javascript">//几个参数需要注意一下
        $("#button").click(function(){
              $.post('/graph', //post方法，向/graph网址提交数据
              {'query_sentence': $('#query_sentence').val()}, //通过id为query_sentence的变量向服务器提交数据
              function(result) { //前端对于服务器返回数据的操作函数
                    console.log(result);
                    alert（‘成功’）;
                }
            );
        }
    </script>
</head>
<body>
<div id="input-div"> //非form表单实现方式
    <textarea name="query_sentence" id='query_sentence' placeholder="请输入查询语句"></textarea>
          <button class="btn_search" id="button">Search</button>  
</div>
</body>
</html>

三、非表单ajax函数提交

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
  <link href="/static/css/style.css" rel="stylesheet" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="ajax方式">
    <script src="/static/js/jquery-1.11.2.min.js"></script>
  <script src="/static/js/cytoscape.min.js"></script>		
  <script src="/static/js/cytoscape-qtip.js"></script>
    <script type="text/javascript">//几个参数需要注意一下
        $('#button').click(function () {        
        $.ajax({
            type: "post",//post方法，
            url: '/graph',//向/graph网址提交数据
            data: {'query_sentence': $('#query_sentence').val()},//通过id为query_sentence的变量向服务器提交数据
            dataType: 'json',
            success: 
              function(result) { //前端对于服务器返回数据的操作函数
                    console.log(result);
                    alert（‘成功’）;
                }
            );
        }
    </script>
</head>
<body>
<div id="input-div"> //非form表单实现方式
    <textarea name="query_sentence" id='query_sentence' placeholder="请输入查询语句"></textarea>
          <button class="btn_search" id="button">Search</button>  
</div>
</body>
</html>

 

qq_30852577
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery 异步请求数据的三种方式
12-20
$('#send_ajax').click(function () { var params = $('input').serialize(); //序列化表单的值 $.ajax({ type: "POST", contentType: "application/json;charset=utf-8", url: "WebServicetest.asmx/HelloWorld", data: "{username:'cccc'}", dataType: "json", success: function (data) { alert(data); alert(data.d); var json = null; json = eval('(' + data.d + ')') alert(json.username); }, beforeSend: function(x) { x.setRequestHeader("Content-Type", "application/json; charset=utf-8"); }, error: function(x, e) { alert(x.responseText); }, complete: function(x) { alert(x.responseText); } }); });
Jquery使用post方式进行异步请求
lumot的博客
09-22 2177
jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求 参数： url(String) : 发送请求的URL地址. data...
jquery实现post异步请求
unhejing的博客
11-07 1513
1.语法 jQuery.post(url,data,success(data, textStatus, jqXHR),dataType) $("#vkmid").change(function(){ var url = $url = $(this).data('url'); var mid = $(this).val(); $.post(url,{mid:mid},function(
异步 POST
weixin_34381687的博客
09-14 68
1 根据网址初始化OC字符串对象 NSString * urlString = [NSString stringWithFormat:@"%@",kVideoURL]; 2 创建URL对象 NSURL * url = [NSURL URLWithString:urlString]; 3 创建请求 NSMutableURLRequest * req...
jquery 中post 、get的同步问题
水铭痕
10-17 557
解决方法1： 在全局设置： Js代码    $.ajaxSetup({       async : false   });            然后再使用post或get方法 Js代码   $.get("register/RegisterState", {test : 12}, function(data, status) {
jQuery异步提交表单的两种方式
10-21
两种方式都是异步提交表单，但有以下几点不同： 1. **调用方式**：第一种方式是直接调用`$.ajax`，而第二种方式是先调用`$.ajaxSubmit`，这个方法是`jquery.form.js`插件提供的，它简化了表单提交的流程。 2. **...
JQuery异步加载PartialView的方法
10-22
在ASP.NET MVC框架中，JQuery异步加载PartialView是一种常见的优化用户体验的技术，它允许我们只更新页面的一部分内容，而无需刷新整个页面。这种方式对于提高网页性能和响应速度特别有用，尤其是在处理大数据量或者...
Jquery中ajax提交表单几种方法(get、post两种方法)
12-04
此外，jQuery的`$.ajax()`函数提供了一个更通用的方式来发送Ajax请求，它可以同时处理GET和POST，还可以自定义更多的选项，如请求头、数据类型等： ```javascript $.ajax({ type: 'POST', // 或者 'GET' url: '...
jQuery实现的几种实用特效
01-23
本文将详细探讨使用jQuery实现的几种实用特效，这些特效能够提升用户体验，使网页更具吸引力。 首先，我们来谈谈jQuery的动画效果。jQuery提供了多种内置的动画方法，如`fadeIn()`, `fadeOut()`, `slideToggle()`等...
通过XMLHttpRequest和jQuery实现ajax的几种方式
10-23
这个例子中，我们首先检查浏览器是否支持XMLHttpRequest，然后打开一个POST请求到服务器上的Handler.ashx，最后一个参数为true表示异步请求。当请求状态改变时，`onreadystatechange`事件处理函数会被调用，如果请求...
jquery异步调用post get方式
05-19
jquery异步调用post get方式
异步请求.post()和.ajax({})的区别
09-16
异步请求中,异步请求.post()和.ajax({})的区别以及一些解释
使用jquery发送Ajax请求的几种异步刷新方式
青云交的博客
08-21 1686
本博客地址| GitHub | 小站坐坐 1.需求1: 第一种方式实现ajax异步刷新--ajax 2.需求2: 第二种方式实现ajax异步刷新--get 3.需求3: 第三种方式实现ajax异步刷新--post 4.需求4: 第四种方式实现ajax异步刷新--getJSON 5.需求5: 第五种 使用jquery...
jQuery的POST请求实现同步异步
天外来物的博客
10-19 1831
语法 $.post(URL,data,function(data,status),dataType) 参数： ur（必需）l：请求地址； data（可选）：请求参数（格式：{name：value}）； function（可选）：请求成功时的回调函数，data：请求返回的数据，status：请求的状态； dataType（可选）：服务器响应的数据类型； 设置同步异步 $.post() 和 $.get() 默认是异步请求，设置为同步： $.ajaxSettings.async = false; 设置为异步：
jQuery：$post、$get、$ajax与php，实现异步加载
甜妹的博客
11-07 1766
jQuery：$post、$get、$ajax与php，实现异步加载 什么是异步加载？ 整个最通俗的说法就是将另外一个页面上的数据通过append() 或者 html()等函数插入到本页上。纯js写法responseXML 或 responseText插入到页面中。 另外一个页可以是静态页面的可以是动态页面的，更可以是json、xml数据。 原理基本都差不多，页面方便很多只要得到我们想
JQuery异步请求之$.post()
林高禄
08-07 8199
AJAX各种实现方式 JQuery异步请求之$.post() 语法 例子 AJAX各种实现方式 JQuery异步请求之$.post() 语法 $.post(url,[data],[callback],[type]) url：请求路径 data：请求参数 callback：回调函数 type：响应结果的类型 例子 例子：单击某个按钮，异步请求servlet,然后把响应内容返回给div jsp代码 <%@ page contentType..
jquery的post异步请求
weixin_30912051的博客
11-19 97
1.jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求 参数： url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。 callback (Function) : (可选) 载入成功时回调函数(只有当R...
jQuery异步请求使用详解($.get/$.post/$.getJSON/$.ajax)
雾林小妖的博客
12-07 5633
讲解jQuery中常见的异步请求$.get,$.post,$.getJSON,$.ajax如何发送请求及如何获取和解析后端返回的json类型的数据。
jquery异步调用post的一些注意事项
GoodShot的专栏
01-12 2817
1.aspx网页，只要放在form标签的html按钮标签 input的type="submit"，则无论form是否添加 runat="server",点击它，都会像服务器控件一样触发回发给后的.cs文件处理 例如   2.要使得在aspx网页中不回发给后台，则应采用 使用这种方式才能被页面内的jq
html5表单提交给flask后台的几种方式
最新发布
05-26
在HTML5中，提交表单的方式有以下几种： 1. 使用form标签提交表单 使用HTML的form标签可以将表单数据提交到Flask后台。在form标签中设置action属性为后台接口地址，method属性为POST或GET，name属性为表单名称。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值