Ajax向后台发送数据

Ajax向后台发送数据,三种情况:

1:Ajax手动发数据

#GET  发数据<div>
        <a class="btn" onclick="AjaxSubmit1();">点我</a>

 </div>
<script src="/static/js/jquery-3.2.0.js"></script>
    <script>

        function AjaxSubmit1() {
            $.ajax({
                url:‘/ajax1.html‘,
                type:‘GET‘,
                data:{‘p‘:123},
                success:function (arg) {

                }
            })

        }
 </script>
#POST 发送数据function AjaxSubmit3() {
            $.ajax({
                url:‘/ajax1.html‘,
                type:‘POST‘,
                data:{‘p‘:123},
                success:function (arg) {

                }
            })

        }

2:HMLHttpRequest方法

#get发送数据

function AjaxSubmit2() {
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function () {
                if(xhr.readyState==4){
                    //接受完毕服务器返回的数据
                    console.log(xhr.responseText);
                }
            };
            xhr.open(‘GET‘,‘/ajax1.html?p=123‘);

            xhr.send(‘null‘);
        }
#POST发送数据

function AjaxSubmit4() {
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function () {
                if(xhr.readyState==4){
                    //接受完毕服务器返回的数据
                    console.log(xhr.responseText);
                }
            };
            xhr.open(‘POST‘,‘/ajax1.html‘);
            xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded;charset-UTF-8‘)
            xhr.send(‘p=456‘);
        }

3:Iframe标签+Form表单(‘伪’Ajax)

 <h6>基于iframe+Form表单</h6>
        <iframe id=‘iframe‘ name="ifra"></iframe>
        <form id=‘fm‘ action="/ajax1.html" method="POST" target="ifra">
            <input name="root" value="111"/>
            <a onclick="AjaxSubmit5();">提交</a>

function reloadIframe() {
{#            this.contentWindow#}
            var content=this.contentWindow.document.body.innerHTML;
            var obj=JSON.parse(content);
            if(obj.status){
                alert(obj.message);
            }
        }

ps:基于Iframe发送数据

<h6>学习iframe</h6>
        <div>
            <input id="url" placeholder="请输入URL"/><a onclick="Test1();">查看</a>
        </div>
        <iframe id=‘iframe‘ style="height: 800px;width: 600px;" src="http://www.autohome.com.cn"></iframe>

 function Test1() {
            var url=$(‘#url‘).val();
            $(‘#iframe‘).attr(‘src‘,url);
        }
时间: 2024-12-04 21:34:56

Ajax向后台发送数据的相关文章

使用ajax向后台发送数据

第一种最原始的方式就是手动拼接json数组: var name="text"; $.ajax({ url:"". data:{'name':name} success:function(){ } }) data内为json数组 第二种便是将form表单序列号后传递给后台 原文地址:https://www.cnblogs.com/fanwenhao/p/8330041.html

AJAX 向后台发送带 List 集合的对象

现有基类: public class School { int name; int address; List<Student> students = new ArrayList<Student>(); } public class Student { int name; int sex; } 现在我需要通过ajax向后台传输一个包含所有学生集合的School对象: 传输的数据格式为: school: { "name" : "清华大学", &

jQuery通过ajax获得后台json数据给form表单赋值

jQuery提供了load方法可以将数据加载到页面form表单中,但有时候我需要获取后台json数据中某个值时,又需要赋值整个form表单,load方法没有回调函数所以就不行了,如果用ajax调用的话,获得后台json数据后把json数据分析出来在一个个的赋值到form表单的每个文本框中,这样未免太过复杂和太多代码,所以我根据了一些大神的回答,总结了一个很好用的jQuery函数. jQuery-load方法调用: $('#form').form('load',URL); 页面表单: <span

jsTree通过AJAX从后台获取数据

页面代码: <div id="MenuTree"></div> javascript代码: $(document).ready(function ($) { InitMenuTree(); }); function InitMenuTree() { $('#MenuTree').data('jstree', false); $.getJSON('@Url.Action("GetMenuTree", "AdminMenu")

前端 ajax 获取后台json数据 解析

先贴代码 function edit(node) { var customerid = $(node).parents("tr").children().eq(0).text(); alert(customerid) $.ajax({ type: "post", url: "/IsCreateCoustomer/AddButtes?id=" + customerid, // dataType: "json", //这个数据传输

Ajax接收后台发送过来的布尔值以及指定的字符串

后台: aContext.getResponse().getWriter().println("" + result); 前端: $.ajax({ url:encodeURI(encodeURI(url)), async :true, type:'post', success:function(result) { if(result.indexOf("true")!=-1){//重点在这!!! alert('设置成功!'); }else{ alert('设置失败!'

AJAX 向后台发送带 List 集合的对象(转)

var school = {};school.name = '清华大学';school.address = "北京";//此处使用的是 easyui 插件来获取数据var rows = $('#maintainTableId').datagrid('getSelections');for (var i = 0; i < rows.length; i++) { school["students [" + i + "].name"] = row

向后台发送数据vue

在main.js中添加 import axios from 'axios'; Vue.prototype.$http = axios; 在需要的登录vue组件中引入: 需要先安装qs  cnpm install qs -d import qs from 'qs' 最后 this.$http.post('http://tapi.funxdata.com/login/login', qs.stringify({ 'type':'wechat', 'code':res.code }),{ header

ajax请求返回的数据无法用选择器绑定事件

今天在写一个项目的时候突然发现一个很怪异的问题,问题是这样的: 当我使用ajax去后台请求数据就将后台拼接生成的html代码直接添加到页面中了,但是在后续操作中发现,生成的html代码绑定的click不起作用,但是换成onclick="click()"的话就可以了. 出现的原因是: 因为先后顺序的关系啊~用AJAX加载是异步加载这个应该很清楚吧~既然是异步加载那么就是非同步的,也就是说当你的整个页面加载完成后$('.div').click(function(){.....});这句根本