React JS - 在onClick事件后触发PHP - React JS - Trigger PHP after onClick event

React JS - Trigger PHP after onClick event

本文关键字：PHP 事件 onClick JS React | 更新日期: 2023-09-27

我试图通过 react js 脚本的 AJAX 调用或在 react 组件中单击提交按钮时调用 PHP 脚本。我使用普通的 HTML 和 JQuery 完成了此操作，但发现很难使用 react 实现相同的内容。

其中一位用户解释了正常的输入流程并将其显示为警报。但是我希望将输入值发送到PHP脚本。JQuery 代码是：

   $('#button').click(function () {
        alert("first")
        $.ajax({
            type: "GET",
            crossDomain: true,
            url: "http://localhost:8085/Folder1/login.php",
            data: {
                stime: $("#demo1").val(),
                etime: $("#demo2").val(),
                desc: $("#servername").val()
            },
            success: function(data){
                alert(data)
                $('#resultip').html(data);
            },
            error:function(data)
            {
                alert("Data sending failed");
            }
        });

我是新手反应，无法获得任何解释此操作的文档。任何帮助都非常感谢。

https://jsfiddle.net/69z2wepo/34020/

你可以在 React JS 的提交事件中向你的 PHP 脚本发出 GET 请求，你可以把你的 AJAX 调用放在handleSubmit()

此外，由于您正在发出GET请求，因此您不必将其设置为JSON，因此您可以将参数直接发送到外部脚本，参数将附加到URL中，如下所示GET /test_url.php?first_name=John&last_name=Doe然后您可以使用$_GET['first_name']在PHP代码中访问这些参数

handleSubmit(event) {
    event.preventDefault();
    var data = this.state;
   $.ajax({
        type: "GET",
        crossDomain: true,
        url: "http://localhost:8085/Folder1/login.php",
        data: {
            stime: $("#demo1").val(),
            etime: $("#demo2").val(),
            desc: $("#servername").val()
        },
        success: function(data){
            alert(data)
            $('#resultip').html(data);
        },
        error:function(data)
        {
            alert("Data sending failed");
        }
    });
  },

您可以检查控制台以查看对脚本的 GET 请求，

这是更新的小提琴：https://jsfiddle.net/9qewutqk/2/