一个HTML表单如何触发一个PHP函数?

时间:2021-10-15 作者:dsenese

我是Wordpress/PHP世界的新手。我希望我的页面能够与我自己构建的API进行通信。因此,我在Wordpress页面上有一个使用HTML代码小部件的表单,如下所示:

<html>
<body>
    <div>
        <form id="myform" action="submit_shortcode">
            <input type="text" id="input" placeholder="Input" required>
            <input type="submit" value="Enter">
        </form>
    </div>
</body>
</html>
我已将此代码添加到函数中。当前主题的php:

function get_shortcode($sc) {
    $response = wp_remote_get(\'http://localhost:9000/shortcode/\'.$sc);

    if (is_array($response)) {
        $body = $response[\'body\'];
        $data = json_decode($body);
        echo $data;
        if (! is_wp_error($data)) {
            echo "error";
        }
    }

    return;
}

add_action(\'submit_shortcode\', \'get_shortcode\');
但我不知道如何将函数与表单集成。当我提交表单时,它会将我发送到mypage/submit\\u快捷码。提交表单时,如何触发函数get\\u shortcode?

PS:这是;短代码“;与Elementor的Shortcode小部件无关

2 个回复
SO网友:Sean Michaud

It sounds like you want an AJAX request of some sort.

In your functions.php file, enqueue some JavaScript to handle the form.

wp_register_script( \'my-scripts\', get_stylesheet_directory_uri() . \'/[path to your scripts]/myscripts.js\', array( \'jquery\' ), \'1.0\', true );

See this link for reference.

Right under that, add a JavaScript variable for your AJAX URL.

wp_localize_script( \'my-scripts\', \'data\', array( \'ajax_url\' => admin_url( \'admin-ajax.php\' );

Reference on wp_localize_script and admin_url.

After the script is registered, add it to the queue so it can be loaded.

wp_enqueue_script( \'my-scripts\' );

Under that, add in your code for getting the response from your API.

// your function, set up for AJAX
function get_api_response() {
    $response = wp_remote_get(\'http://localhost:9000/shortcode/\'.$sc);

    if (is_array($response)) {
        $body = $response[\'body\'];
        $data = json_decode($body);
        echo $data;
        if (! is_wp_error($data)) {
            echo "error";
        }
    }

    wp_die(); // make sure you do this
}
add_action( \'wp_ajax_get_api_response\', \'get_api_response\' );
add_action( \'wp_ajax_nopriv_get_api_response\', \'get_api_response\' );

Reference here.

And finally, in your JavaScript file (myscripts.js in this example), handle the form submission.

jQuery(document).ready(function($) {
    $(\'#myform\').on(\'submit\', function(e) {
        e.preventDefault(); // stop the form from submitting
        $.post(
            data[\'ajax_url\'], // passed in from wp_localize_script
            {
                \'input\' : $(\'#input\').val()
            },
            function( response ) {
                // do what you want to do here
                // the response will be what\'s echoed by the
                // get_api_response function
            }
        );
    });
});

If you don\'t want to use AJAX, the "shortcode" you\'re using will need to be made into a real shortcode and used on the page you\'re posting your form to. Info on that here.

Your shortcode would then need to grab the $_POST values from your form and do something with them. In either case, make sure you sanitize all values coming from the outside world.

Hope this helps.

Cheers!

SO网友:Robert at Peak Zebra

如果您对JavaScript感到满意,一种方法是将JavaScript版本的函数排队,然后从表单中将其作为onSubmit 属性因此,大致如下:

输入名称:您已排队myFunction 要么在function.php 或在插件中:

function load_my_script() {
    wp_enqueue_script( \'myFunction\', get_template_directory_uri() . \'/js/myFunction.js\');
}
add_action( \'wp_enqueue_scripts\', \'load_my_script\' );