php – 如何在jQuery Mobile页面中提交表单?
我有一个
HTML主页,它使用jQuery mobile的UI.在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> 表单的action参数调用我的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的行 更新(我使它工作): <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提交.它不会起作用.
我复制了你的代码并插入了jquery mobile,在进行了一些小的修改之后我发布了数据.我通过echo命令运行它,而不是DB插入.
看看以下内容: 调用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”. 看看它是否适合你. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |