AJAX 게시 요청 및 문자열 연결

jQuery/AJAX를 사용하여 게시 요청을하고 있습니다. 나는 첫 번째 텍스트 상자에서 입력을 받아 URL과 연결하고 두 번째 텍스트 상자에 결과를 표시하려고합니다. 예를 들어 사용자가 asdf을 입력하면 ajax 함수가 게시물을 만들고 결과는 http://www.example.com/sdf/으로 표시됩니다. 나는 두 가지 문제가있다. 초기에 나는 포스트를 수행하고 있지만 html로 diplaying하는 ajax 함수를 가지고 있다고 언급 했으므로 (firebug 콘솔에 표시된다). 둘째, URL에 입력을 어떻게 연결할 수 있습니까? Live Site AJAX 게시 요청 및 문자열 연결

<script> 
$(document).ready(function() { 
    var timer = null; 
    var dataString; 

    function submitForm() { 
     $.ajax({ 
      type: "POST", 
      url: "/concatenate/index.php", 
      data: dataString, 
      dataType: "html", 
      success: function (data) { 
       $("#result").html(data); 
      } 
     }); 
     return false 
    } 
    $("#input").on("keyup", function() { 
     clearTimeout(timer); 
     timer = setTimeout(submitForm, 40); 
     var input = $("#input").val(); 
     dataString = { input : input } 
    }) 
}); 
</script> 
</head> 
<body> 

<h1>Enter a word:</h1> 

<form action="create_entry.php" method="post"> 
Input: <input type="text" id="input" name="zipcode"></br> 
Concatenated Result: <input type="text" id="result" name="location" value="http//www.example.com/ /" readonly></br> 
</form>

출처

2013-11-09 user2970730

사용 $ ("# 결과") 발 (데이터).; $ ("# result") 대신에 .html (data); –

에 있어야한다 데이터에 전역 변수를 사용하는 대신

연결을 수행하려면 .data() 메서드를 사용하여 입력의 원래 값을 저장할 수 있으며 항상 그 값을 가져온 다음 새 값을 추가 할 수 있습니다.

<!-- remove extra space and "/" --> 
<input type="text" id="result" name="location" value="http//www.example.com/" readonly>

$(document).ready(function() { 
    var timer = null; 
    /* cache $("#result") and store initial url value*/ 
    var $result=$("#result"); 
    $result.data('url',$result.val()); 

    function submitForm(input) { 
     $.ajax({ 
      type: "POST", 
      url: "/concatenate/index.php", 
      data: {input:input}, 
      dataType: "html", 
      success: function (data) { 
       /* new value from stored url and new user input*/ 
       var url=$result.data('url'), 
       newUrl= url+data; 
       /* use val() not html() */ 
       $result.val(newUrl); 
      } 
     }); 
     return false 
    } 


    $("#input").on("keyup", function() { 
     /* no point using "$("#input")" to search DOM again when already have "this"*/ 
     var input = $(this).val(); 
     clearTimeout(timer); 
     timer = setTimeout(function(){ 
      submitForm(input) ; 
     }, 40); 


    }) 
});

출처

2013-11-09 16:22:28 charlietfl

아무 것도 표시되지 않고, 방화 벽 콘솔에 체크인되어 있고 게시 요청조차도 이루어지지 않았습니다. [Link] (http://webprolearner.ueuo.com/concatenate/) – user2970730

OK 수정 된 캐싱 값 – charlietfl

나는이 접근법을 좋아하고 변화를 만들었지 만, 어떻게 여전히 전체 HTML 페이지를 표시합니까? – user2970730

그것은 당신이 submitForm에 매개 변수를 전달할 제안

success: function (data) { 
    $("#result").val('http//www.example.com/'+data+'/'); 
}

출처

2013-11-09 16:07:36

CHAGE이

success: function (data) { 
       $("#result").html(data); 
      }

이

success: function (data) { 
     $("#result").attr('value','http//www.example.com/'+data+'/'); 
}

출처

2013-11-09 16:13:27 user2511140

이것은 올바르지 않습니다 ... 입력에는 innerHtml이 아닌 값이 있습니다 – charlietfl

내 실수 코드가 업데이트되었습니다. – user2511140

나는 어디에서 가는지 좋아하지만 전체 HTML 페이지를 결과의 끝에 추가합니다. [link] (http://webprolearner.ueuo.com/concatenate/)를 참조하십시오. – user2970730

AJAX 게시 요청 및 문자열 연결

답변

관련 문제