jQuery Mobile使用PHP提交,无需AJAX和JavaScript

Sorry, I consider myself as a real newbie around jQuery Mobile. I'm not good at all regarding JavaScript. Here's the thing. I want to build a jQuery Mobile site without using AJAX. Just want the nice design from jQuery Mobile and then use PHP to submit forms etc.

I tried to build a simple page that submit first and last name to a MySQL database. It will submit, tell the user that it's submitted and then the user can press [Page 2] to see all the results. Now I use if(isset()) to display the message and else to display the form. So, the user who enter the site will get the form, when press [Submit] he/she will get the message that first and last name was submitted. Then press the button [Page 2] to see all the first and last names.

PHP (index.php)

if(isset($_POST['send'])) {

    $insert = $db->prepare("INSERT INTO name (fname, lname) VALUES(:fname, :lname)");
    $insert_array = array(
        ":fname" => $_POST['fname'],
        ":lname" => $_POST['lname']
    );

    $insert->execute($insert_array);

    $db = NULL;

    echo $_POST['fname'] . ' ' . $_POST['lname'] . ' was added!<br><br>';
}

else {
    echo '
    <form method="post" data-ajax="false">

        First name:
        <input type="text" name="fname"><br>

        Last name:
        <input type="text" name="lname"><br>

        <input type="submit" name="send" value="Add">

    </form><br>';
}

<a href="page2.php" data-role="button">Page 2</a>

PHP (page2.php):

$query = $db->query("SELECT * FROM name");

while($row = $query->fetch(PDO::FETCH_ASSOC)) {
    echo $row['fname'] . ' ' . $row['lname'] . '<br>';
}

$db = NULL;

echo '<a href="index.php" data-role="button">Index</a>';

Let's say I enter "Test" as first and last name. It will echo out "Test Test was added!". If I now press [Page 2] I will see that "Test Test" was added. BUT when I then press [Index] to go back I want it to display the form again, but the message "Test Test was added!" is displayed again instead of the form, why? I have to update the page to get the form. Now, if I enable data-ajax it's working with submitting and back-button. BUT then I have to press update at page2.php when I get there to see all the first and last names. Do I make myself understood what's the problem?

Sorry, really new at jQuery Mobile and I can't find the answer at Google. Everyone is using JavaScript to submit data. Is it possible this way or do I have to learn JavaScript to submit forms? Read somewhere that using buttons instead of submit-buttons affect it.

Thanks in advance! :)

drrog9853
drrog9853 谢谢你的回答。好的,如果我想要外观和体验,我还需要做什么?我是否需要使用JavaScript来序列化等?我是否需要HTML文件,PHP文件和JS文件来构建ONE功能?我喜欢PHP,因为它很简单。我可以把所有东西放在一个文件中。是的,我知道我可以用jQueryMobile将所有内容都放在一个文件中,但大多数人都在谈论一个HTML文件是最好的。将代码分成更小的部分是不是更容易?
6 年多之前 回复
duanjiangzhi6851
duanjiangzhi6851 这似乎是一件非常奇怪的事情。jQuerymobile与jQuery和AJAX功能密切相关。如果你想要相同的外观和感觉,你可以复制它的CSS部分并手动构建自己的HTML元素来使用这些类,但即使这样也不会给出相同的整体体验。
6 年多之前 回复

1个回答

I think you are looking to modify the DOM after the request? So post the form, add the user then display the results without having to click the button.

So on your ajax call use the done function to hide the form and show the results.

Take a look below and let me know if it helps.

EDIT: Added the .on click for the button. You may also want to look at adding a keypress checker to the inputs or an onsubmit on the form.

<div id="content">
<?php
if(isset($_POST['send'])) {

    $insert = $db->prepare("INSERT INTO name (fname, lname) VALUES(:fname, :lname)");
    $insert_array = array(
        ":fname" => $_POST['fname'],
        ":lname" => $_POST['lname']
    );

    $insert->execute($insert_array);

    $db = NULL;

    echo $_POST['fname'] . ' ' . $_POST['lname'] . ' was added!<br><br>';
}

else {
    echo '
    <form method="post" data-ajax="false" id="contentForm">

        First name:
        <input type="text" name="fname"><br>

        Last name:
        <input type="text" name="lname"><br>

        <input type="submit" name="send" value="Add" id="sendButton">

    </form><br>';
}
?>
</div>

<script type='text/javascript'>
<!-- https://api.jquery.com/jQuery.ajax/ -->
$('#sendButton').on("click", function(){ 
    $.ajax({
      type: "POST",
      url: "page2.php",
      data: $('#contentForm').serialize()
    })
      .done(function( msg ) {
        $('#content').html( msg );
    });
});
</script>
dsc862009
dsc862009 嗨再次,我有一个问题。 看看这个教程:tutorialzine.com/2011/08/jquery-mobile-mvc-website-part-2他根本不使用JS。 只需一直打开和关闭PHP标记。 我习惯只打开PHP标签一次并回显HTML。 如果您不想在使用jQuery Mobile时使用JS提交/获取数据,那么他的方式(在教程中)是一种“正确”方式吗? 他没有在教程中提交,只是提取,但它应该工作。 我上面的问题是获取数据。 你怎么看? :)
6 年多之前 回复
donglei7152
donglei7152 啊,所以用户只看到HTML文件。 然后你通过JavaScript将它发布到PHP文件并获取数据? 你知道任何好的基本指南吗? 像Lynda或者什么? 我认为Lynda有一个JavaScript指南,但没有面向jQuery / jQuery Mobile。
6 年多之前 回复
doujieju0397
doujieju0397 是的,JavaScript是绝对需要的,这是实现它的方法。 我为应用程序需要的服务器的所有调用创建服务器页面(API),然后返回JSON / XML。 我用JavaScript解析它并将其显示在HTML中。 这是一个很好的方法,然后将来其他人或应用程序可以使用相同的服务器调用。
6 年多之前 回复
doufei2007
doufei2007 尝试过PhoneGap。 我创建了一个非常简单的页面来试用很多jQuery Mobile。 将它打包到APK并安装在我的Android上。 只是静态的东西。 但问题是当我尝试应用PHP和SQL时。 所以我需要为每个函数创建一个单独的JS文件。 就像登录系统一样,一个用于添加用户,一个用于ööh,你可以命名。 那是对的吗? 我唯一想要的是发布和获取数据。 是的,我在jQuery Mobile中有非常好的和流畅的交易。 :)所以,需要学习JavaScript并通过JavaScript发布所有内容。
6 年多之前 回复
dqnf28092
dqnf28092 我用HTML5 / JQuery制作了一个应用程序,其中大部分完全是JS和HTML(PHP / .NET / Java服务器端,但只能在网上工作)。 取决于你想要运行什么平台,但PhoneGap是一个很好的方式来使用JQuery进入多个平台。 我认为他们有一个关于如何进行设置的快速教程,但需要一些编程知识。
6 年多之前 回复
duanpiyao2734
duanpiyao2734 嗯,GET和你的代码一起工作。 我知道为什么我需要JS,序列化等但它有效。 谢了哥们! :)但我不喜欢GET,因为它改变了我的链接。
6 年多之前 回复
dsyct08008
dsyct08008 您还可以尝试使用上面的代码将表单从method =“post”更改为method =“get”。 因为AJAX调用是post,它应该可以工作但是如果JQuery mobile接管并提交表单,那么它将使用get进行(希望如此),你会看到表单。 只是另一个建议,看看发生了什么。
6 年多之前 回复
doujiekeyan0622
doujiekeyan0622 好的,这有点复杂。 我刚用$ _POST = array(); 插入后。 当index.php尝试在屏幕上打印值时,在fname和lname处获得未定义的索引。 在构建jQuery应用程序时,您如何做? 你是在一个HTML文件,一个PHP文件和一个JS文件中分割每个功能吗? 你知道任何好的,不复杂的初学者指南吗? 如果这是发布数据的正确方法?
6 年多之前 回复
doudou8893
doudou8893 $ _POST = array(); 应该清除你的帖子数据。 如果在插入之后你执行此操作并且仍有值进入index.php我怀疑你在点击index.php链接时以某种方式发布到页面。 JQuery mobile可能正在接管您的锚点并向其添加onclick事件。 很难说没有仔细看代码。
6 年多之前 回复
dpr81047
dpr81047 未设置($ _ POST [ '发送']); 没用。 $ _POST = array();? 发送,fname或ename。 你想怎么样?
6 年多之前 回复
dstk51319
dstk51319 或$ _POST = array();
6 年多之前 回复
dpvp56187
dpvp56187 如果你添加unset($ _ POST ['send']); 在插入之后它可能会起作用,除非在使用JQuery Mobile时发送其他内容。
6 年多之前 回复
doutan1857
doutan1857 嗯,不行不通。 现在页面的工作原理与以前完全一样 当我返回index.php时,该消息仍然可见。
6 年多之前 回复
doulu1968
doulu1968 对不起再试一次,我在按钮上添加了一个onpress。 它只是在之前加载页面时触发。
6 年多之前 回复
douji8549
douji8549 嗯,它不起作用。 :(什么是DOM?我必须使用序列化等吗?无论如何,我尝试过,没有运气。我可以看到表单闪烁然后消失。我不能只使用普通的PHP if(isset())来 检查按钮是否被按下?为什么我回去时文本仍然可见?它不应该因为按下按钮时信息才会显示。我不明白。
6 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问