7

我有一个使用 jQuery 移动 UI 的 HTML 主页。在 HTML 页面的某处，我有一个类似于投票表单的表单：

<form name = "vote" action = "logicDB.php" method = "post">
                    <center>
                        <h3>Watch our videos above and share your opinion which manufacturer produces the best sport sedans</h3>                
                        <fieldset style = "width:60%;">
                            <legend>Choose a car:</legend>
                            <input type = "radio" name = "rc1" id = "radio-choice-1" value = "Audi"/>
                            <input type = "radio" name = "rc1" id = "radio-choice-2" value = "BMW"/>
                            <input type = "radio" name = "rc1" id = "radio-choice-3" value = "Mercedes"/>           
                        </fieldset>                 
                        <input value = "SUBMIT" type = "submit" />
                    </center>
</form>

表单的操作参数正在调用具有以下逻辑的我的 php 文件：

<?php
$connection = mysql_connect("localhost","root","myPassword");
if(!$connection){ die('Could not connect: ' . mysql_error()); }

mysql_select_db("mydatabase", $connection);

if ($_POST['rc1'] == 'Audi')
{   
    mysql_query("
    UPDATE carvote
    SET votes = votes + 1
    WHERE Brands = 'Audi'
    ",$connection);

    echo "success Audi within if";
}

if ($_POST['rc1'] == 'BMW')
{
    mysql_query("
    UPDATE carvote
    SET votes = votes + 1
    WHERE Brands = 'BMW'
    ",$connection);

    echo "success BMW within if";
}

if ($_POST['rc1'] == 'Mercedes')
{
    mysql_query("
    UPDATE carvote
    SET votes = votes + 1
    WHERE Brands = 'Mercedes'
    ",$connection);

    echo "success Mercedes within if";
}
mysql_close($connection);
?>

我在我的 WAMP localhost 服务器上创建了一个数据库，并且此 php 代码正在写入数据库，具体取决于从表单中选择和提交的单选选项。php 中的这些回声永远不会达到。

问题是当我点击提交时，我会在左上角看到一个白屏，上面写着“未定义”，之后没有任何内容写入数据库。我发现，如果我从 html 主页删除顶部调用 jQuery mobile 的行，一切正常，并且数据被写入数据库（达到 php 中的回声）。似乎 jQuery mobile 与我的 php 代码不兼容。我应该如何解决这个问题？先感谢您！

更新（我让它工作）：这是我在表格中所做的更改：

<form id = "ContactForm" onsubmit="return submitForm();">

带有数据库的 php 文件保持不变。除此之外，我还添加了一个 Ajax 代码：

function submitForm()
    {
        $.ajax({type:'POST', url: 'logicDB.php', data:$('#ContactForm').serialize(), success: function(response)
        {
            $('#ContactForm').find('.form_result').html(response);
        }});
        return false;
    }

总结：jQuery Mobile 页面（在 div 中带有 data-role = "page" 的页面）只能通过 AJAX 提交。否则它将无法正常工作。我会把话题换成我的问题，让更多的人可以接触到。

4

1 回答 1

6

我复制了您的代码并插入了 jquery mobile，在进行了一些小的更改后，我正在发布数据。我通过回显命令运行它，而不是数据库插入。

看看以下内容：

在 Jquery Mobile 上调用：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

index.php 页面的其余部分：

<div data-role="page">
<center>
    <h3>Watch our videos above and share your opinion which manufacturer produces the best sport sedans</h3>                
    <form name="vote" action="logicDB.php" method="post" data-ajax="false">
        <fieldset style = "width:60%;" data-role="controlgroup">
            <legend>Choose a car:</legend>
            <input type = "radio" name="rc1" id = "radio-choice-1" value = "Audi"/>
            <label for="radio-choice-1">Audi</label>

            <input type = "radio" name="rc1" id = "radio-choice-2" value = "BMW"/>
            <label for="radio-choice-2">BMW</label>

            <input type = "radio" name="rc1" id = "radio-choice-3" value = "Mercedes"/>
            <label for="radio-choice-3">Mercedes</label>                            
        </fieldset>                 
        <input value = "SUBMIT" type = "submit" />
    </form>
</center>

最后是 logicDB.php

if ($_POST['rc1'] == 'Audi') {
 echo "Audi <br>";
}
if ($_POST['rc1'] == 'BMW') {
 echo "BMW <br>";
}
if ($_POST['rc1'] == 'Mercedes') {
 echo "Mercedes <br>";
}

主要的变化是

<fieldset style = "width:60%;" data-role="controlgroup">

和data-ajax="false"我之前提到的。

看看这是否适合你。

于 2012-04-19T19:04:30.463 回答