1

ウェブサイトに3つのドロップダウンボックスのあるフォームがあります。ユーザーがそれぞれからオプションを選択して送信を押すと、データが外部のphpファイルに投稿され、MySQLにクエリが実行され、ページが再読み込みされて結果が投稿されます。ページをリロードせずにajaxを使用して、これをもっと凝ったものにしたいと思います。問題は、私が完全に無感覚であるということです。私はインターンを検索し、いくつかの例を試しましたが、結果はありませんでした。コードは次のとおりです。

HTMLフォーム：

<form name="showprice" id="showprice" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<select name="country" id="country">
<option value="">Select Country</option>
</select>
<select name="industry" id="industry" onchange="setOptions(document.showprice.industry.options[document.showprice.industry.selectedIndex].value);">
<option value="">Select Industry</option>
</select>
<select name="quality" id="quality">
<option value=" " selected="selected">Select country and industry first.</option>
</select>
<input value="Submit" type="submit" name="submit" id="submit">
</form>

<script  type="text/javascript">
var frmvalidator = new Validator("showprice");
frmvalidator.addValidation("country","req","Please select country");
frmvalidator.addValidation("industry","req","Please select industry");
frmvalidator.addValidation("quality","req","Please select quality");
</script>

注：スペースを節約するためのオプションを削除しました。

外部view.prices.php：

それは別のフォルダにあり、今私は結果を次のように呼んでいます

<?php include('includes/view.prices.php'); ?>

現在のコードは次のとおりです。

if(isset($_POST['submit'])) {
include ('config.php');
$con1 = mysql_connect($server, $username, $password);
if (!$con1)
{
die(<b>Could not connect: </b> . mysql_error());
}
echo'<br /><br /><table id="myTable" class="tablesorter" align="center">
<thead>
<tr>
**some table headers (8 columns)**
</tr>
</thead>
<tbody>';

$cou = $_POST['country'];
$ind = $_POST['industry']; 
$qua = $_POST['quality'];

$sql = "SELECT * FROM $ind WHERE quality=$qua AND desig=$cou ORDER BY id ASC" or  die('<b>Data Insert Error:</b> ' . mysql_error());

echo("<tr>
**Some table results with 8 variables taken from the MySQL database**
</tr>");

if (!mysql_query($sql,$con1))
{
die('Error: ' . mysql_error());
}
}
echo    '</tbody>
</table>';
mysql_close($con1);
}}
else {
echo '<div class="grid_9">
<p><b>TIP:</b> Pick country, industry and quality from the drop-down above and hit "Submit" button to view results.</p>
</div>';
}

どんな助けでも大歓迎です。

4

5 に答える 5

1

jQueryを調査します。デフォルトのハンドラーを無効にする必要があります。

e.preventDefault();

次に、jQueryを使用すると、次のようなことができます。

   $.ajax({
        type: 'POST',
        url: '',
        data: $("#showprice").serialize(),  dataType: 'json',
        success: function(data){
            if( data['status'] == 'success' )
            {           
              // Do stuff here
            } 
        }
    });

このコードは、jsonでエンコードされた文字列を返すことを前提としています。どのjQueryが問題なく処理できるか。

于 2012-05-02T20:55:15.820 に答える
1

これには常に jQuery を使用します。

$(function() {
    $('#showprice').sumbit(function() {
    $.post('includes/view.prices.php', $(this).serialize(),function(data) {  
    $('#idoftag').html(data);
    })
    });

})
于 2012-05-02T21:02:38.640 に答える
0

友人の助けを借りて、私はこれを行うことができました：

1）フォームが追加されているファイルの先頭に：

<script type="text/javascript" src="path-to-jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var working = false;
$('#id-of-form').submit(function(e){
e.preventDefault();
if(working) return false;
working = true;
//$('#submit').val('Sending..');
$.post('path-to-php-file-to-be-executed',$('#id-of-form').serialize(),function(msg){
working = false;
//$('#submit').val('Submit');
$('#id-of-div-where-result-will-be-outputed').html(msg);
});
});
});
</script>

2) フォームの後に、出力データの div を追加します

<div id="output_div"></div>

3) path-to-php-for-execution に以下を追加します。

if(isset($_POST['id-of-form-field-1']) && isset($_POST['id-of-form-field-2']) && isset($_POST['id-of-form-field-3'])) {

// some queries here

}

それで全部です

于 2012-05-09T15:43:35.773 に答える
0

フォームで、アクションの値として現在のページを参照します...たとえば、ページが index.php の場合。次に、action="index.php" および method = "post" を使用します。データを表示する div 内で、正しい形式で php コードを記述し、このすべてのコードを if($_POST){ -your database retrieve code - } ?> で囲みます。これは、投稿アクションが同じページを呼び出し、コードの周囲の条件が true になり、実行されることを意味します。これが役に立てば幸いです。当時は私を悩ませていましたが、私はこれでうまくいきました。

于 2014-12-30T01:26:10.353 に答える