`
Turbo12138
  • 浏览: 45117 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQuery-Ajax后台提交数据与获取数据

 
阅读更多
function jqajax(){
    var urlName = $("#urlName").val();
    var urla = $("#url").val();
    var pid = $("#pid").val();

    var url = "http://192.168.2.3:3001/address/post";//后台数据库接口

    $.ajax({
        type: "post",
        url: url,
        data: {urlName:urlName,url:urla},
        dataType:"JSONP",
        jsonpCallback:"flightHandler",
        //beforeSend: function(){
        //    $("#span_content").text("数据处理中...");
        //},
        //success: function(msg){
        //    $("#show").html(msg);

        success:function(t){
           
            if(t.status  == 'success'){

                alert('yesssss');

            }else{

                alert('noooooooooo');

            }
        }

    });
}

 上面是提交数据

 

 

下面是获取数据

function jqajax(){

    $.ajax({
        url: "http://192.168.2.3:3001/address/get/list?page=11&limit=20",//页数11  每页20条
                                                   //获取数据接口
                               
        type: "GET",
        dataType: "jsonp",
        jsonpCallback:"flightHandler",
        success: function (data) {
            data.data.forEach(function(d){
                var customers_html = "<div class='list-style' data-id="+ d.id + " ><p class='p1'><a href='" + '"' + d.url_str + '"' + "'>"+d.url_name+"</a></p><p><span  id=" + d.url_str + " data-id="+ d.id + " data-dd="+ d.pid + ">"+"修改"+"</span><span  id=" + d.id + " >"+"删除"+"</span></p></div>";
               // onclick='ShowDiv("+'"'+MyDiv+'"'+","+'"'+fade+'"'+")'
                $(".list").prepend(customers_html);
                //$("#sure").bind()("click", function () {
                //
                //})
                //var id = $(this).attr("id");
                //var dd = $(this).attr("data-id");
                //document.getElementById("change").value = d.id;
                //document.getElementById("typ").value = d.pid;
                $("#" + d.id ).bind("click", function () {
                    document.getElementById("MyDiv").style.display='block';

                    document.getElementById("fade").style.display='block' ;
                    var bgdiv = document.getElementById("fade");
                    bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
                    $("#"+fade).height($(document).height());//???????
                    $(this).closest(".list-style").remove();
                });
                //$("#" + d.id ).bind("click", function () {
                //    //获取ID
                //    console.log("2222222222222222222222222222222222222222");
                //    var id = $(this).attr("data-id");
                //    //AJAX发送给服务端
                //    console.log(id);
                //    //删除元素
                //
                //    //选中当权元素的祖级中class为list-style的元素,执行删除
                //    $(this).closest(".list-style").remove();
                //});
                $("#" + d.url_str ).bind("click", function () {
                    //获取ID

                    var id = $(this).attr("data-id");
                    document.getElementById("change").value = id;
                    var dd = $(this).attr("data-dd");
                    document.getElementById("typ").value = dd;
                    //AJAX发送给服务端
                    //删除元素

                    //选中当权元素的祖级中class为list-style的元素,执行删除
        
                    document.getElementById("MyDi").style.display='block';

                    document.getElementById("fad").style.display='block' ;
                    var bgdiv = document.getElementById("fad");
                    bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
                    $("#"+fad).height($(document).height());//???????
                });
            })

        },
        error: function (data) {
            alert();
        },
        complete: function (data) {
        }
    });
}

 

分享到:
评论

相关推荐

    jQuery-ajax-用户名异步请求

    这个过程可以通过Ajax调用后台接口实现,避免用户频繁提交表单进行检查。 首先,我们需要在HTML中创建一个输入框和一个按钮,用于获取用户名和触发异步请求: ```html 请输入用户名"&gt; 检查用户名 ``` 然后,我们...

    spring框架项目+jQueryAjax提交实例。jquery-3.3.1.min.js

    标题中的"spring框架项目+jQueryAjax提交实例"指的是一个整合了Spring框架和jQuery AJAX技术的Web应用程序项目。这个项目提供了一个完整的流程,演示了如何在前端使用jQuery的AJAX功能向后端Spring MVC控制器发送...

    jquery+ajax实现无刷新提交的功能

    ### 使用jQuery与Ajax实现网页无刷新提交功能 在现代Web开发中,为了提供更好的用户体验,很多网站都会采用Ajax技术来实现在不刷新整个页面的情况下进行数据的提交与更新。本篇文章将详细介绍如何利用jQuery库结合...

    ajax提交表单到后台

    本主题将深入探讨如何使用jQuery库的AJAX功能将表单数据提交到后台,以及后台如何使用Spring框架来处理这些数据。下面将详细阐述这一过程。 ### 一、前端:使用jQuery的AJAX提交表单 1. **引入jQuery库**:首先...

    jquery-validation.zip

    在实际应用中,jQuery验证插件不仅可以用于简单的字段验证,还可以与其他jQuery插件(如表单序列化插件)配合,实现更复杂的数据验证和提交。例如,结合AJAX提交,可以在不刷新页面的情况下进行后台验证,提高交互...

    ssm_ajaxsubmit-ajax提交-模态对话框-ajax上传文件

    通常,Ajax使用JavaScript的XMLHttpRequest对象与服务器进行通信,通过发送HTTP请求获取响应数据。在jQuery库的支持下,我们可以使用$.ajax()或$.post()等方法轻松实现Ajax提交。 2. **模态对话框** 模态对话框...

    php+jquery+ajax最简单例子

    5. **Ajax回调**:当Ajax请求完成,jQuery的回调函数会被调用,接收到的服务器响应数据可以在这里处理。将响应数据插入到页面的适当位置,更新用户界面。 这个例子的核心在于展示了客户端(JavaScript/jQuery/Ajax...

    ajax-jquery-demo

    它们接受URL、数据和回调函数作为参数,适合简单的数据获取或提交。 3. **$.getJSON()**:此方法专门用来获取JSON格式的数据,它将自动设置请求类型为GET,并处理返回的JSON数据。 4. **$.load()**:这个方法用于...

    基于jquery的Ajax后台模板框架

    **基于jQuery的Ajax后台模板框架详解** 在现代Web开发中,前端与后端的交互扮演着至关重要的角色,Ajax(Asynchronous JavaScript and XML)技术的出现使得页面无需刷新即可完成数据的异步更新,极大地提升了用户...

    Asp.Net MVC之jQuery与AJAX操作实例

    在Asp.Net MVC框架中,jQuery和AJAX的结合使用极大地提升了用户体验,使得网页能够实现异步数据交互,无需刷新整个页面即可完成数据的增删查改操作。本实例将深入探讨如何在Asp.Net MVC项目中应用jQuery与AJAX。 一...

    Ajax的jquery与后台交互

    本篇文章将深入探讨jQuery如何与后台进行Ajax交互。 ### 1. jQuery中的Ajax函数 jQuery提供了一个名为`$.ajax()`的全局函数,用于发起Ajax请求。这个函数支持多种HTTP请求方法,如GET、POST、PUT、DELETE等。基本...

    jQuery-easyUI开发包及帮助文档

    在实际开发中,jQuery-EasyUI的一个关键优势是其对Ajax的支持,它可以轻松实现与服务器的数据交互,如异步加载数据、提交表单等。同时,EasyUI还提供了数据绑定和分页功能,这在处理大量数据时非常有用。 总的来说...

    Ajax里jQuery的ajax与ssh集成

    首先,jQuery的`$.ajax()`方法是核心工具,它允许我们发起异步HTTP请求(GET或POST)到服务器,获取或提交数据。这个方法提供了丰富的选项来定制请求行为,例如URL、数据类型、数据内容、请求类型等。例如,发送一个...

    JQuery AJAX跨域提交参数、接收json数据.docx

    JQuery AJAX 跨域提交参数、接收 JSON 数据 JQuery 的 AJAX 功能是实现异步数据交互的核心部分,对于跨域提交参数和接收 JSON 数据的需求,JQuery 提供了多种解决方案。 首先,JQuery 的 AJAX 功能可以使用 `$....

    struts2+json+jquery实现ajax数据的存取

    通过以上步骤,"Struts2+JSON+jQuery实现Ajax数据的存取"能够有效地提高Web应用的交互性和响应速度,使得用户在不刷新整个页面的情况下,也能获取并处理服务器的新数据。在实际项目中,这通常用于实现表格数据的分页...

    jquery-1.5.1

    4. **API接口**:通过AJAX调用,jQuery能与后台API无缝对接,实现数据的获取和提交。 总结,jQuery 1.5.1以其高效和易用性,为前端开发带来便利。无论是在小项目还是大型复杂应用中,都能发挥出强大的威力。了解并...

    JQueryMobile与后台通信

    总结,jQuery Mobile通过AJAX与后台进行通信,结合页面生命周期事件、表单提交和响应数据处理,可以实现动态、交互的移动应用。在与Java后端集成时,理解JSP和Servlet的工作原理,以及RESTful API设计,有助于构建...

    Ajax将数据发送到后台进行局部刷新操作

    GET请求用于获取数据,而POST请求则常用于提交数据,如用户输入。 4. **数据格式**:尽管名字中有XML,但现在更常见的是使用JSON(JavaScript Object Notation),因为JSON更轻量级,解析更快,且与JavaScript语法...

    jQuery dialog form 提交 后台不能取值的解决办法

    在使用jQuery UI Dialog组件进行表单提交时,有时会出现后台无法获取到表单数据的问题。这个问题通常是由于前端处理不当或后端接收方式不正确导致的。以下是对这个问题的详细分析和解决方案。 首先,jQuery UI ...

    源代码-Ajax(Jquery)实用例子 v1.0.zip

    3. **与ASP结合**:在ASP环境中,Ajax可以用来动态获取服务器端的数据,比如通过`$.ajax()`发送GET或POST请求到ASP页面,处理服务器端的数据后返回结果,然后在客户端更新特定的HTML元素,实现无刷新的用户体验。...

Global site tag (gtag.js) - Google Analytics