Это вопрос jQuery Mobile, но он также относится к чистым jQuery.
Как я могу публиковать данные формы без перехода страницы к набору страниц в атрибут действия формы. Я создаю приложение phonegap, и я не хочу напрямую обращаться к серверной странице.
Я пробовал несколько примеров, но каждый раз форма пересылает меня в целевой файл php.
Этот пример был создан с использованием jQuery Mobile 1.2. Если вы хотите увидеть недавний пример, посмотрите на эту статью или более сложную. Вы найдете 2 рабочих примера, объясненных большими подробностями. Если у вас больше вопросов, задайте их в разделе комментариев к статье.
Подача формы – это постоянная проблема с jQuery Mobile.
Этого можно добиться несколькими способами. Я перечислил некоторые из них.
Это наилучшее возможное решение, если вы используете приложение phonegap, и вы не хотите напрямую обращаться к php на стороне сервера. Это правильное решение, если вы хотите создать приложение iOS для телефонных разговоров.
index.html
<!DOCTYPE html> <html> <head> <title>jQM Complex Demo</title> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <style> #login-button { margin-top: 30px; } </style> <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script src="js/index.js"></script> </head> <body> <div data-role="page" id="login" data-theme="b"> <div data-role="header" data-theme="a"> <h3>Login Page</h3> </div> <div data-role="content"> <form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false"> <fieldset> <div data-role="fieldcontain"> <label for="username">Enter your username:</label> <input type="text" value="" name="username" id="username"/> </div> <div data-role="fieldcontain"> <label for="password">Enter your password:</label> <input type="password" value="" name="password" id="password"/> </div> <input type="button" data-theme="b" name="submit" id="submit" value="Submit"> </fieldset> </form> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> <div data-role="page" id="second"> <div data-theme="a" data-role="header"> <h3></h3> </div> <div data-role="content"> </div> <div data-theme="a" data-role="footer" data-position="fixed"> <h3>Page footer</h3> </div> </div> </body> </html> check.php:
<?php //$action = $_REQUEST['action']; // We dont need action for this tutorial, but in a complex code you need a way to determine ajax action nature //$formData = json_decode($_REQUEST['formData']); // Decode JSON object into readable PHP object //$username = $formData->{'username'}; // Get username from object //$password = $formData->{'password'}; // Get password from object // Lets say everything is in order echo "Username = "; ?>
index.js:
$(document).on('pagebeforeshow', '#login', function(){ $(document).on('click', '#submit', function() { // catch the form's submit event if($('#username').val().length > 0 && $('#password').val().length > 0){ // Send data to server through ajax call // action is functionality we want to call and outputJSON is our data $.ajax({url: 'check.php', data: {action : 'login', formData : $('#check-user').serialize()}, // Convert a form to a JSON string representation type: 'post', async: true, beforeSend: function() { // This callback function will trigger before data is sent $.mobile.showPageLoadingMsg(true); // This will show ajax spinner }, complete: function() { // This callback function will trigger on data sent/received complete $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner }, success: function (result) { resultObject.formSubmitionResult = result; $.mobile.changePage("#second"); }, error: function (request,error) { // This callback function will trigger on unsuccessful action alert('Network error has occurred please try again!'); } }); } else { alert('Please fill all nececery fields'); } return false; // cancel original event to prevent form submitting }); }); $(document).on('pagebeforeshow', '#second', function(){ $('#second [data-role="content"]').append('This is a result of form submition: ' + resultObject.formSubmitionResult); }); var resultObject = { formSubmitionResult : null }
Я столкнулся с той же проблемой, когда я вызываю другую .php-страницу из моего index.html. Страница .php сохраняла и извлекала данные и рисовала piechart. Однако я обнаружил, что когда была добавлена логика рисования пихера, страница не будет загружаться вообще. Преступником была строка, вызывающая страницу .php из моего index.html:
<form action="store.php" method="post">
Если я изменю это на:
<form action="store.php" method="post" data-ajax="false">
, он будет работать нормально.
При использовании PHP и публикации данных
Использовать data-ajax = "false" является лучшим вариантом в <form> .
Проблема в том, что JQuery Mobile использует ajax для отправки формы. Простое решение этого – отключить ajax и отправить форму как обычную форму.
Простое решение: form action = "" method = "post" data-ajax = "false"