Jquery AJAX 简单实现前台后台互传数据

AJAX是一个很强大的东西,之前写过一篇 AJAX Servlet异步交互 ,是放在请求的url上进行实现的,放在Url上长度有限,如果想保存很长的东西,例如博客这样的就不行了!

导包:

主要是json.jar这个包,其他的是ueditor的包!

前台代码:(这是部分主要的代码,省略了ueditor的代码)

//引入easyui的一些插件
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>

//提交内容的方法
function submitContents(){
            //UE.getEditor(‘editor‘).getContent()这个方法是ueditor给出的获得输入框内容的方法,自己实现一些即可
            var contents = UE.getEditor(‘editor‘).getContent();
                   //这是jquery封装好的ajax方法       //save.do是后台地址! {text:contents}前一个是键,后一个是值,从后台用getparam...方法获得值!function(result)是后台给前台放回东西的处理函数,        //result是后台返回的json对象            $.post("save.do",{text:contents},function(result){
                if(result.success){
                    $.messager.alert(‘系统提示‘,‘操作成功了!这是从后台返回的内容:‘+result.contents);
                }else{
                    $.messager.alert(‘系统提示‘,‘操作没有成功!‘);
                }
            },"json");
}

//按钮绑定方法
<input type="button" value="提交" onclick="submitContents()">

后台代码:

package com.loger.servlet;

import java.io.IOException;
import java.net.URLDecoder;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONObject;

public class Save extends HttpServlet {

    @SuppressWarnings("deprecation")
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // TODO Auto-generated method stub
             //返回的编码过滤,不然前台接收到的中文会乱码
        resp.setCharacterEncoding("utf-8");

        String contents = req.getParameter("text");     //定义一个json对象,这是通过键值对的方式存值的
        JSONObject result = new JSONObject();
        if(contents == null){
            result.put("false",false );
            System.out.println("没有内容");

        }else{
            result.put("success", true);
            result.put("contents", contents);
            System.out.println(contents);
        }
        resp.getWriter().println(result.toString());
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // TODO Auto-generated method stub
        this.doPost(req, resp);
    }
}

运行结果:

时间: 2024-12-30 23:20:21

Jquery AJAX 简单实现前台后台互传数据的相关文章

springmvc和easyui使用ajax前台后台互传数据,假删除提示警告问题。

前台 //删除 多/单条数据 function del(cid){ var id=''; if(cid=='-1'){ if(getSelections().length > 0){ id=getSelections(); }else{ $.messager.alert("提示", "请选择要删除的行", "error"); return; } }else{ id=cid; } var arr =id.split(":"

jQuery+AJAX实现网页无刷新上传

新年礼,提供简单.易套用的 jQuery AJAX上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易.

jQuery AJAX实现调用页面后台方法

1.新建demo.aspx页面.2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 3.无参数的方法调用. 大家注意了,这个版本不能低于.net framework 2.0.2.0已下不支持的.后台代码: [WebMethod] public static string SayHello() { return "Hello Ajax!"; } JS代码: $(function() { $("#btnOK&qu

使用Jquery.AJAX方法和PHP后台数据交互小结

使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正确. 第二:在传输数据时,传输的数据格式是否正确. 第三:我遇到过 200 但是执行的是AJAX方法的错误方法,我总结了一下,一般都是PHP的数据格式不正确,所以,当遇到200 error时候,应该认真,仔细的检查PHP传输的数据格式是否争取,由于JSON的特性,所以,使用JSON的时候对数据格式规

jQuery.ajax()通过 HTTP 请求加载远程数据实力详解

通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax()可以不带任何参数直接使用. 注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置. 回调函数 如果要处理$.ajax()得到的数据,则需要使用回调函数.beforeSend.e

android后台上传数据demo

1.界面启动后开启服务 public class UploadlogActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Intent inte

KETTLE:mongdb与mysql互传数据

注:部分内容引用了 http://blog.sina.com.cn/s/blog_4ac9f56e0101g881.html 1.mongodb传数据到mysql 1)在kettle中,mongodb input组件. 2)编辑组件 输入连接信息 选择数据库 写查询语句 选择字段.上面的复选框选择是否输入json格式,这时不选. 点击get fileds,获取字段对应关系. $代表根目录 .代表子目录 []代表数组中的值,例如: {"data" :{ "museum"

前台jquery+ajax+json传值,后台处理完后返回json字符串,如何取里面的属性值?(不用springmvc注解)

一.取属性值 前台页面: function select(id){ alert("hfdfhdfh"+id); $.ajax({ url:"selectByid.jsp", datatype:'json', data:{id:id}, // 发送数据 error:function(data){ alert("出错了,没有这个学生!!"); }, success:function(data){ alert(data); var json = eva

jquery下php与ajax的互传数据自我总结

研究了一整天的json数据与ajax的数据传输,现在进行一个小的自我总结,仅供参考 1.关于ajax的认识 $.ajax(),是jquery下包装好的一个函数.http://www.w3school.com.cn/jquery/ajax_ajax.asp 使用其跟php段进行通信. <script type="text/javascript">  //jquery直接进行ajax的包装调用       $(function(){