-1

次の index.html があります。

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<title>galshan ajax</title>
<script>
$(document).ready(function(){
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "add.php",
        action: "get_prof",
        data: { "par" : '' },
        dataType: "json",
        async: true,
        success: function(data) {
            var select = $('#mySelect');
            $(data).find('root').each(function(){
                $(this).find('p').each(function(){
                    var textVal = $(this).val('n');
                    var valueVal = $(this).val('i');
                    select.append("<option class='ddindent' value='"+ valueVal +"'>"+textVal+"</option>");
                });
            });
            select.children(":first").text("pick one").attr("selected",true);
        } //sucess close
    }); 
}); 
</script>
</head>
<body>
    <div id="page-wrap">
        <select id="mySelect">
            <option>loading</option>
        </select>
    </div>
</body>
</html>

add.php ファイルは次のとおりです。

<?php
function get_prof(){
    $par = isset($_POST['par'])?$_POST['par']:'';
    // where are we posting to?
    $url = 'example.com/GetProf';

    // what post fields?
    $logins = array(
       'clientID' => 'idnum',
       'username' => 'name',
       'password' => 'password',
       'par'      => $par
    );

    // build the urlencoded data
    $postvars = http_build_query($logins);

    // open connection
    $curl_handle = curl_init();

    // set the url, number of POST vars, POST data
    curl_setopt($curl_handle, CURLOPT_URL, $url);
    curl_setopt($curl_handle, CURLOPT_POST, count($logins));
    curl_setopt($curl_handle, CURLOPT_POSTFIELDS, $postvars);

    // execute post
    $result = curl_exec($curl_handle);

    // close connection
    curl_close($curl_handle);
}
?>

応答は次のようになります。

<?xml version="1.0" encoding="utf-8"?>
<root>
  <p i="9107" n="content01" />
  <p i="9267" n="content02" />
  <p i="9106" n="content03" />
  <p i="9078" n="content04" />
  <p i="9282" n="content05" />
  <p i="1000" n="content06" />
  <p i="1200" n="content07" />
  <p i="9097" n="content08" />
  <p i="1400" n="content09" />
  <p i="9242" n="content10" />
</root>

私は基本的に、#mySelect に、テキストが n 値で実際の値が i であるというオプションを入力しようとしています。そして、私にはいくつかの問題があります：

  1. ajaxスクリプトからadd.phpファイル内の関数を呼び出すことができないようです.phpファイルで関数を宣言しないと、応答を取得できますが、返せないようです。ajaxスクリプトからphpファイル内の特定の関数を呼び出すにはどうすればよいですか?
  2. 外部 Web サイトから応答を受け取ったときに、データを select 要素のオプションとして追加できないようです。何が間違っていますか?

このプロジェクトは今週終了する必要があります。誰かがそれを手伝ってくれたらありがたいです。

4

1 に答える 1

0

この html の主な問題は、dataType: "xml" または "json" で動作しない jquery バージョン 1.3 を使用したことです。

次に、n と i は、.val ではなく $(this).attr("i") のように到達できます。

第三に、php ファイルに値を渡して実行したい関数を定義するだけでは、ajax で php 関数を実行することはできません。

知るための私のコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" title="main css" type="text/css" media="screen" charset="utf-8">
<title>ajax</title>
<script>
$(document).ready(function(){
    $.ajax({
        type: "POST",
        url: "add.php",
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        data: { "par" : "500"},
        dataType: "xml",
        async: true,
        success: function(xml) {
            var select = $('#profSel');
            $(xml).find('root').each(function(){
                $(this).find('p').each(function(){
                    var textVal = $(this).attr("n");
                    var valueVal = $(this).attr("i");
                    select.append("<option class='ddindent' value='"+ valueVal +"'>"+textVal+"</option>");
                });
            });
            select.children(":first").text("בחר ענף").attr("selected",true);
        } //sucess close
    }); 
}); 
</script>
</head>
<body>
    <div id="page-wrap">
        <select id="profSel">
            <option>loading</option>
        </select>
    </div>
</body>
</html>

まだ作業中です。更新します。

于 2015-05-22T20:21:45.777 に答える