Ajax异步提交数据返回值的换行问题实例分析

本文实例分析了Ajax异步提交数据返回值的换行问题。分享给大家供大家参考，具体如下：

前面分析介绍了《Javascript基于AJAX回调函数传递参数》及《IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别》，学习了ajax回调函数传参与针对不同浏览器处理中文乱码问题的方法。这里就来分析一下ajax异步提交返回值中换行问题的处理技巧。

背景介绍：

需要实现的功能是：在下拉框中选择分类，提交到PHP根据选择的分类返回该分类下的成员名称，返回值各成员姓名以换行的形式显示到textarea中。

html代码：

<form action="setduty.php?action=add" method="post" name="setForm" id="setForm">
<p> <label>类型：</label>
  <select name="type" id="typeduty">
  <option value="-1">选择类型</option>
  <option value="1">值班首长</option>
  <option value="2">值班处长</option>
  <option value="3">值班员</option>
  </select>
</p>
<p class="opertext">
    <label>成员：</label>
   <textarea name="names" id="names" cols="30" rows="10"></textarea>
</p>

JQuery 代码：

$(document).ready(function(){
 $("#typeduty").change(function(){
  var type = $("#typeduty").val();
  $.post("setduty_do.php",
   {
    'cid' : type,
   },function(data,status){
    newData = data.replace(/\r\n/g,'');
     $("#names").html(newData);
  });
 });
});

PHP代码：

if($type){
 switch($type){
  case "1":
   $arrs = getChiefList();
  break;
  case "2":
   $arrs = getDirectList();
  break;
  case "3":
   $arrs = getAttendantList();
  break;
  default:
  break;
 }
 $arr_names = "";
 foreach($arrs as $arr){
  if(strlen($arr[1])>2){
   $arr_names.= $arr[1]."\n";
  }
 }
 echo $arr_names;
}

php代码中返回的值直接带有换行“\n”，textarea 中IE和FF的换行符号都是 "\n",jQuery 的处理返回值中注意，使用

代码如下:

newData = data.replace(/\r\n/g,'');

处理返回的结果，用于去除最开始的换行符号，Ajax返回的值中，都自动带有一个换行。这是Ajax本身带有的。

希望本文所述对大家ajax程序设计有所帮助。

赞 (0)

相关推荐

  • 获取JavaScript异步函数的返回值

    今天研究一个小问题: 怎么拿到JavaScript异步函数的返回值? 1.错误尝试 当年未入行时,我的最初尝试: <script> function getSomething() { var r = 0; setTimeout(function() { r = 2; }, 10); return r; } function compute() { var x = getSomething(); alert(x * 2); } compute(); </script> 2.回调函数

  • 谈谈JavaScript异步函数发展历程

    <The Evolution of Asynchronous JavaScript>外文梳理了JavaScript异步函数的发展历程,首先通过回调函数实现异步,之后又经历了Promise/A+.生成器函数,而未来将是async函数的.感谢景庄对该文章的翻译,内容如下: 现在让我们一起来回顾这些年来JavaScript异步函数的发展历程吧. 回调函数Callbacks 似乎一切应该从回调函数开始谈起. 异步JavaScript 正如我们所知道的那样,在JavaScript中,异步编程方式只能通过

  • NodeJS中利用Promise来封装异步函数

    在写Node.js的过程中,连续的IO操作可能会导致"金字塔噩梦",回调函数的多重嵌套让代码变的难以维护,利用CommonJs的Promise来封装异步函数,使用统一的链式API来摆脱多重回调的噩梦. Node.js提供的非阻塞IO模型允许我们利用回调函数的方式处理IO操作,但是当需要连续的IO操作时,你的回调函数会多重嵌套,代码很不美观,而且不易维护,而且可能会有许多错误处理的重复代码,也就是所谓的"Pyramid of Doom". 复制代码 代码如下: ste

  • 不同js异步函数同步的实现方法

    不同函数达到同步的函数模拟 funcList是函数执行函数的队列,其中回调函数中flag=true是同步标记量 <script> var flag = false; function funcTest(t,func){ setTimeout(function(){ (function(param){ console.log(param); func(); }(t)); },t*1000); } var funcList = []; funcList.push(function(){funcTe

  • JQuery异步获取返回值中文乱码的解决方法

    用jqgrid异步获取列表值,遇到个问题,服务器端从数据库取到的数据没有出现中文乱码问题(日志打出来是没有乱码的),但是异步传到客户的时候却出现了乱码. 服务器端已经编码过了(UTF-8编码).开始一直怀疑是客户端的问题,比如客户端和服务器端编码不一致啊,也怀疑是不是jqGrid工具函数中少配了 contentType: "application/x-www-form-urlencoded; charset=utf-8",   等等问题. 结果都不是,纠结了几个小时,后来经过大牛的提醒

  • Ajax异步提交数据返回值的换行问题实例分析

    本文实例分析了Ajax异步提交数据返回值的换行问题.分享给大家供大家参考,具体如下: 前面分析介绍了<Javascript基于AJAX回调函数传递参数>及<IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别>,学习了ajax回调函数传参与针对不同浏览器处理中文乱码问题的方法.这里就来分析一下ajax异步提交返回值中换行问题的处理技巧. 背景介绍: 需要实现的功能是:在下拉框中选择分类,提交到PHP根据选择的分类返回该分类下的成员名称,返回值各成员姓名以换行的形式显示到tex

  • jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例

    jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: <body> <div> <input type="chec

  • laravel 解决ajax异步提交数据,并还回填充表格的问题

    小白一个,经过一晚百度,暂时想出来的方法 我就直接图片了 不喜勿喷, 首先我用bootstraptable 简单创建一个表格 ajax 用post提交数据 创建路由和控制器 路由: 路由里面我加前缀和中间件,也可以不加,这laravel的基础,我就不说了(本人很懒) 控制器: 附图:提交的数据表单 每点击一下按钮,就添加一行 以上这篇laravel 解决ajax异步提交数据,并还回填充表格的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Ajax返回值类型与用法实例分析

    本文实例讲述了Ajax返回值类型与用法.分享给大家供大家参考,具体如下: Ajax返回值类型主要有XML类型和文本类型,其中文本类型又可以分为HTML.json类型等. 1.返回值之XML类型 如果服务器的响应头中Content-type的内容为text/xml时,此时XMLHttpRequest对象的responseXML属性才能使用. 2.返回值之文本类型 文本类型主要分为Html类型和json类型. (1)Html类型 使用场景:一般返回需要重复复杂的操作.比如,页面使用ajax从服务器请

  • JQuery基于FormData异步提交数据文件

    web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一些html浪费带宽,我们希望达到一个无刷新的.异步的提交效果来给用户更好的体验,这时候就要使用ajax,ajax可以不依赖表单自行发起一次http请求并且取回服务器响应的数据,这就是ajax的简便之处.我们这里使用JQuery中封装好的ajax函数,更加简便.下面列举几个使用ajax异步提交数据的方

  • jquery的ajax异步请求接收返回json数据实例

    jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",         url : "a.php",         dataType : "json

  • ajax请求后台接口数据与返回值处理js的实例讲解

    ajax的代码,用的是jquery的 ajax: $.ajax({ url: "/test.php",//后台提供的接口 type: "post", //请求方式是post data:{"type":"1", //这是你要传给后台的data值 "t":"c4552111" }, dataType: "json", //数据类型是json型 success: funct

  • 使用ajax异步提交表单的几种方法总结

    这里介绍三种常用的提交方式 方式一 手工收集所有的用户输入,封装为大的"k1=v1&k2=v2-"键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', url:'Notice_noTipsNotice', data:'k1=v1&k2=v2...', cache:false, dataType:'json', success:function(data){ } }); 方式二 单序列化:$('#myfor

  • 关于ajax异步访问数据的问题

    在js中,处理数据固然很快,sososo就能完成所有的数据处理,我们似乎不需要使用异步传输数据 跨洋数据传输就出现了问题,一来2s过去了一回2s过去了,这对于访问者来说,这就是卡 再者 我输入了密码 提示密码错误 于是要重新输入,返回了一个网页 这时候输入的数据就会被清空,非常让人抓狂. 为了解决这个问题ajax孕育而生 Ajax全名Asynchronous JavaScript and XML 名为异步的JavaScript和XML Ajax使用方式非常简单 1.创建实例 xhttp = ne

随机推荐