AJAX 및 PHP를 통해 JQuery Mobile 양식 제출(2개 기사)
- PHP中文网원래의
- 2016-08-08 09:31:261372검색
AJAX 및 PHP를 통해 jQuery Mobile 양식 제출
파일 이름: callajax.php
<?php
$firstName = $_POST[firstName];
$lastName = $_POST[lastName];
echo("First Name: " . $firstName . " Last Name: " . $lastName);
?>파일명 : index.php
<!DOCTYPE html>
<html>
<head>
<title>Submit a form via AJAX</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head>
<body>
<script>
function onSuccess(data, status)
{
data = $.trim(data);
$("#notification").text(data);
}
function onError(data, status)
{
// handle an error
}
$(document).ready(function() {
$("#submit").click(function(){
var formData = $("#callAjaxForm").serialize();
$.ajax({
type: "POST",
url: "callajax.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
return false;
});
});
</script>
<!-- call ajax page -->
<div data-role="page" id="callAjaxPage">
<div data-role="header">
<h1>Call Ajax</h1>
</div>
<div data-role="content">
<form id="callAjaxForm">
<div data-role="fieldcontain">
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" value="" />
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" value="" />
<h3 id="notification"></h3>
<button data-theme="b" id="submit" type="submit">Submit</button>
</div>
</form>
</div>
<div data-role="footer">
<h1>GiantFlyingSaucer</h1>
</div>
</div>
</body>
</html>
++++++++++++++++++++++++++++++++++++++ + ++++++++++++++++++++++++++++++++++
jQuery 모바일 양식 제출
http://blog.csdn.net/tjpu_lin/article/details/28394253
최근 jQuery 모바일을 사용하여 모바일 페이지를 개발 중인데 양식을 제출할 때 문제가 발생했습니다.
배경은 서블릿에 의해 처리됩니다. 서블릿에서 리디렉션을 사용하여 페이지를 이동하고 휴대폰으로 전달하려는 경우 오류 페이지 메시지가 나타납니다.
온라인 정보와 jQuery 모바일 API를 참고한 결과 jQuery 모바일 양식 제출은 기본적으로 ajax 제출로 설정되므로 페이지 점프를 서블릿에 작성하면 페이지 점프 기능이 전혀 구현되지 않는다는 것을 알게 되었습니다.
그래서 튜토리얼을 따르고 data-ajax="false" 속성을 양식에 추가했는데 페이지 점프가 작동하지 않을 뿐만 아니라 백그라운드 데이터베이스 작업도 작동하지 않고 500 오류가 보고되는 것을 발견했습니다.
오랜 고민 끝에 ajax를 사용해서 제출하기 때문에 페이지 점프는
<script type="text/javascript">
$(document).ready(function () {
$("#submitbtn").click(function(){
cache: false,
$.ajax({
type: "POST",
url: "feedback",
data: $('#feedbackform').serialize(),
success:function(data){
$.mobile.changePage("success.html");
}
});
});
});<form method="post" id="feedbackform">
t;span style="white-space:pre"> </span>//相关表单元素
<input type="button" id="submitbtn" value="提交">
</form>로 하겠습니다. js의 데이터는
$('#feedbackform').serialize()
참고하세요. 그렇지 않으면 서블릿에서 requset.getParameter를 사용하여 수신된 데이터가 null입니다. ajax가 백그라운드와 성공적으로 상호작용한 후, 성공 후 표시되는 페이지로 이동하려면changePage를 사용하세요.
위에서는 AJAX 및 PHP를 통한 JQuery Mobile 양식 제출(2개 기사)에 대해 소개하고 관련 내용을 더 보려면 PHP 중국어 웹사이트(www.php.cn)를 참고하세요. )!