个人中心
gpt4 book ai didi

javascript - 将来自多个 div 的代码转换为使用 Ajax

转载 作者：可可西里 更新时间：2023-11-01 12:39:48 25 4
gpt4 key购买 nike

<分区>

它是如何工作的，<div>内容变化取决于 <select>他们选择的选项。

而不是一堆<div>我想使用 ajax。不幸的是，我不太擅长ajax，但我想学习使用它。如果有人能帮我指明正确的方向，那就太好了。

我想创建一个通用的 Ajax 类，这样我就可以在我的框架中的任何地方使用它。然后，如果需要，从它扩展另一个类。

你可以在我之前的 SO 问题上看到我的 PHP: Change div according to dropdown boxes selected

JSFiddle

HTML

<form action="" method="post" name="create" target="_top">
    <fieldset>
        <ul class="create">
            <li>
                <label class="label" for="character_name">Character Name:</label>
                <input class="text" type="text" name="character_name" id="character_name" />
            </li>
            <li>
                <label class="label" for="character_gender">Gender:</label>
                <select class="character_gender select" name="character_gender" id="character_gender">
                    <option class="option" value="1">Female</option>
                    <option class="option" value="2">Male</option>
                </select>
            </li>
            <li>
                <label class="label" for="character_race">Character Race:</label>
                <select class="character_race select" name="character_race" id="character_race">
                    <option class="option" value="1">Goblin</option>
                    <option class="option" value="2">Human</option>
                    <option class="option" value="3">Undead</option>
                </select>
            </li>
            <li>
                <label class="label" for="character_class">Character Class:</label>
                <select class="character_class select" name="character_class" id="character_class">
                    <option class="option" value="1">Warrior</option>
                    <option class="option" value="2">Wizard</option>
                </select>
            </li>
            <li>
                <input class="submit-create-character" type="submit" name="create_character" value="Create" />
            </li>
        </ul>
    </fieldset>
</form>
<div class="class-info female-goblin-warrior">
    <div class="avatar-box">
        <img src="Female.Goblin.Warrior.gif" alt="Female Goblin Warrior" />
    </div>
    Goblin description.<br />
    Warrior Description
</div>
<div class="class-info male-goblin-warrior">
    <div class="avatar-box">
        <img src="Male.Goblin.Warrior.gif" alt="Male Goblin Warrior" />
    </div>
    Goblin description.<br />
    Warrior Description
</div>
<div class="class-info female-human-warrior">
    <div class="avatar-box">
        <img src="Female.Human.Warrior.gif" alt="Female Human Warrior" />
    </div>
    Human description.<br />
    Warrior Description
</div>
<div class="class-info male-human-warrior">
    <div class="avatar-box">
        <img src="Male.Human.Warrior.gif" alt="Male Human Warrior" />
    </div>
    Human description.<br />
    Warrior Description
</div>
<div class="class-info female-undead-warrior">
    <div class="avatar-box">
        <img src="Female.Undead.Warrior.gif" alt="Female Undead Warrior" />
    </div>
    Undead description.<br />
    Warrior Description
</div>
<div class="class-info male-undead-warrior">
    <div class="avatar-box">
        <img src="Male.Undead.Warrior.gif" alt="Male Undead Warrior" />
    </div>
    Undead description.<br />
    Warrior Description
</div>
<div class="class-info female-goblin-wizard">
    <div class="avatar-box">
        <img src="Female.Goblin.Wizard.gif" alt="Female Goblin Wizard" />
    </div>
    Goblin description.<br />
    Wizard Description
</div>
<div class="class-info male-goblin-wizard">
    <div class="avatar-box">
        <img src="Male.Goblin.Warrior.gif" alt="Male Goblin Wizard" />
    </div>
    Goblin description.<br />
    Wizard Description
</div>
<div class="class-info female-human-wizard">
    <div class="avatar-box">
        <img src="Female.Human.Wizard.gif" alt="Female Human Wizard" />
    </div>
    Human description.<br />
    Wizard Description
</div>
<div class="class-info male-human-wizard">
    <div class="avatar-box">
        <img src="Male.Human.Wizard.gif" alt="Male Human Wizard" />
    </div>
    Human description.<br />
    Wizard Description
</div>
<div class="class-info female-undead-wizard">
    <div class="avatar-box">
        <img src="Female.Undead.Wizard.gif" alt="Female Undead Wizard" />
    </div>
    Undead description.<br />
    Wizard Description
</div>
<div class="class-info male-undead-wizard">
    <div class="avatar-box">
        <img src="Male.Undead.Wizard.gif" alt="Male Undead Wizard" />
    </div>
    Undead description.<br />
    Wizard Description
</div>

CSS

.class-info {
    display: none
}

Javascript

var buildCharacter = function () {
    var character = {
        properties: {
            gender: '',
            race: '',
            class: ''
        },
        getCss: function () {
            return (this.properties.gender + '-' + this.properties.race + '-' + this.properties.class).toLowerCase();
        }
    };

    for (var prop in character.properties) {
        character.properties[prop] = $('#character_' + prop + ' :selected').text();
    }

    $('.class-info').hide();
    $('.' + character.getCss()).show();
};
buildCharacter();
$('.select').on('change', buildCharacter);

我开始制作一个通用的 Ajax 类，但实际上我认为它无法满足我的需求。

Ajax.php

<?php /* /application/modules/Ajax/Ajax.php */

/**
 * Ajax
 *
 * The Ajax Class is used to get data from a Class and return the data.
 *
 */
class Ajax
{
    private $class;
    private $method;
    private $params;

    /**
     * __construct
     *
     * @access  public
     */
    public function __construct()
    {
        $this->params=$_POST;           # Call params
        $call=explode('->', $this->params['call']);

        if(method_exists($call[0], $call[1]))
        {
            $this->class=new $call[0];  # e.g. controller->method
            $this->method=$call[1];
            unset($this->params['call']);
            $this->parse();
        }
        else
        {
            throw new Exception('Method does not exist', E_RECOVERABLE_ERROR);
        }
    }

    public function parse()
    {
        $param=array();

        # Params in any order...
        $ref_method=new ReflectionMethod($this->class, $this->method);
        foreach($ref_method->getParameters() as $p)
        {
            $param[$p->name]=$this->params[$p->name];
        }
        $this->params=$param;

        $result_data=call_user_func_array(array($this->class, $this->method), $this->params);

        return $result_data;
    }
} # End Ajax class.

25 4 0
文章推荐： php - 获取 google play 开发者控制台页面中列出的所有应用程序
文章推荐： php - 使用 Pgsql 驱动程序从 Laravel 5 连接到 Redshift 数据库？
文章推荐： java - 使用 Retrofit 将数据发布到数据库
文章推荐： php - Laravel 队列与 supervisord 打开太多 FIFO 文件
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com