Ajax 비동기 제출 데이터 반환 값의 줄 바꿈 문제 분석 예

이 글에서는 주로 Ajax 비동기 제출 데이터의 반환 값에서 줄 바꿈 문제를 소개하며, Ajax의 비동기 제출 프로세스에서 줄 바꿈이 있는 반환 값 처리 기술을 예제 형식으로 자세히 분석했습니다. 다음

예제는 Ajax가 비동기적으로 제출한 데이터 반환 값의 줄 바꿈 문제를 분석합니다. 참고하실 수 있도록 공유해드리며, 자세한 내용은 다음과 같습니다.

이전 분석에서는 "Javascript는 AJAX 콜백 함수를 기반으로 매개변수를 전달합니다", "Ajax 전송 매개변수 값이 중국어일 때 IE 브라우저와 FF 브라우저의 차이점"을 소개했으며, Ajax 콜백에 대해 배웠습니다. 함수 전송에는 다양한 브라우저에서 중국어 왜곡 문제를 처리하는 방법이 포함됩니다. 여기에서는 Ajax 비동기 제출 반환 값에서 줄 바꿈을 처리하는 기술을 분석합니다.

배경 소개:

구현해야 할 기능은 다음과 같습니다. 드롭다운 상자에서 카테고리를 선택하고 이를 PHP에 제출한 후 선택한 카테고리에 따라 카테고리 아래의 멤버 이름을 반환합니다. 각 구성원의 이름은 새 줄의 형태로 텍스트 영역에 표시됩니다.

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"을 가지며, 텍스트 영역은 둘 다 "n"입니다. jQuery의 처리 반환 값은

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

를 사용하여 반환된 결과를 처리하여 초기 개행 기호를 제거합니다. Ajax가 반환한 값에는 자동으로 개행이 포함됩니다. 이는 Ajax 자체에 포함되어 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련글 :

SSH 온라인몰은 ajax를 사용해 사용자명 비동기 검증 완료

Ajax 요청의 반환 데이터 순서 분석

Ajax 요청 반복 전송 방지 솔루션

위 내용은 Ajax 비동기 제출 데이터 반환 값의 줄 바꿈 문제 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!