如何在 Codeigniter 中使用 JQuery Ajax 插入数据

在这个 CodeIgniter 教程中，我们将学习如何在 CodeIgniter 中使用 Ajax jQuery 插入记录。在视图文件中创建一个表单，以收集要插入数据库的数据。

在您的控制器文件中创建一个函数来处理 Ajax 请求。此函数应从 POST 请求中检索数据并将其插入数据库。

创建一个 JavaScript 文件以使用 Ajax 将数据发送到控制器。这个文件应该监听表单上的提交事件，然后使用 jQuery 的 Ajax 函数将数据发送到控制器。

这是更详细的步骤细分，

步骤1

在视图文件中创建一个表单

<!-- create a form to collect data -->
<form id="myForm" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <label for="email">Email:</label>
  <input type="text" id="email" name="email">
  <button type="submit" id="submit">Submit</button>
</form>

第2步

创建一个控制器函数来处理 Ajax 请求。

public function insert_data() {
    // Retrieve data from the POST request
    $name = $this - > input - > post('name');
    $email = $this - > input - > post('email');
    // Insert data into the database
    $this - > db - > insert('users', array('name' => $name, 'email' => $email));
    // Send a response back to the JavaScript file
    if ($this - > db - > affectedRows() > 0) {
        echo 'Data inserted successfully';
    } else {
        echo 'Data Insert failed';
    }
}

步骤 3

创建一个 MySQL 数据库表 ' users '。

CREATE TABLE `users` (
    `id` int(11) NOT NULL,
    `name` varchar(40) NOT NULL,
    `email` varchar(60) NOT NULL,
    `created_at` datetime NOT NULL DEFAULT current_timestamp()
)

步骤4

创建一个 JavaScript 文件以使用 Ajax 将数据发送到控制器。

// Listen for the submit event on the form
$('#myForm').submit(function(event) {
    event.preventDefault();
    // Retrieve the data from the form
    var name = $('#name').val();
    var email = $('#email').val();
    // Send the data to the controller using Ajax
    $.ajax({
        url: '<?php echo base_url() ?>index.php/users_controller/insert_data',
        method: 'post',
        data: {
            name: name,
            email: email
        },
        success: function(response) {
            alert(response);
        }
    });
});

就是这样！通过这四个简单的步骤，您可以在 CodeIgniter 中使用 Ajax jQuery 将数据插入到您的数据库中。

文章原文出处： https: //www.c-sharpcorner.com

#codeigniter #jquery #ajax

jQuery Ajax CRUD in ASP.NET Core MVC with Modal Popup

In this article, we’ll discuss how to use jQuery Ajax for ASP.NET Core MVC CRUD Operations using Bootstrap Modal. With jQuery Ajax, we can make HTTP request to controller action methods without reloading the entire page, like a single page application.

To demonstrate CRUD operations – insert, update, delete and retrieve, the project will be dealing with details of a normal bank transaction. GitHub repository for this demo project : https://bit.ly/33KTJAu.

Sub-topics discussed :

Form design for insert and update operation.
Display forms in modal popup dialog.
Form post using jQuery Ajax.
Implement MVC CRUD operations with jQuery Ajax.
Loading spinner in .NET Core MVC.
Prevent direct access to MVC action method.

Create ASP.NET Core MVC Project

In Visual Studio 2019, Go to File > New > Project (Ctrl + Shift + N).

From new project window, Select Asp.Net Core Web Application_._

Image showing how to create ASP.NET Core Web API project in Visual Studio.

Once you provide the project name and location. Select Web Application(Model-View-Controller) and uncheck HTTPS Configuration. Above steps will create a brand new ASP.NET Core MVC project.

Showing project template selection for .NET Core MVC.

Setup a Database

Let’s create a database for this application using Entity Framework Core. For that we’ve to install corresponding NuGet Packages. Right click on project from solution explorer, select Manage NuGet Packages_,_ From browse tab, install following 3 packages.

Showing list of NuGet Packages for Entity Framework Core

Now let’s define DB model class file – /Models/TransactionModel.cs.

public class TransactionModel
{
    [Key]
    public int TransactionId { get; set; }

    [Column(TypeName ="nvarchar(12)")]
    [DisplayName("Account Number")]
    [Required(ErrorMessage ="This Field is required.")]
    [MaxLength(12,ErrorMessage ="Maximum 12 characters only")]
    public string AccountNumber { get; set; }

    [Column(TypeName ="nvarchar(100)")]
    [DisplayName("Beneficiary Name")]
    [Required(ErrorMessage = "This Field is required.")]
    public string BeneficiaryName { get; set; }

    [Column(TypeName ="nvarchar(100)")]
    [DisplayName("Bank Name")]
    [Required(ErrorMessage = "This Field is required.")]
    public string BankName { get; set; }

    [Column(TypeName ="nvarchar(11)")]
    [DisplayName("SWIFT Code")]
    [Required(ErrorMessage = "This Field is required.")]
    [MaxLength(11)]
    public string SWIFTCode { get; set; }

    [DisplayName("Amount")]
    [Required(ErrorMessage = "This Field is required.")]
    public int Amount { get; set; }

    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
    public DateTime Date { get; set; }
}

C#Copy

Here we’ve defined model properties for the transaction with proper validation. Now let’s define DbContextclass for EF Core.

#asp.net core article #asp.net core #add loading spinner in asp.net core #asp.net core crud without reloading #asp.net core jquery ajax form #asp.net core modal dialog #asp.net core mvc crud using jquery ajax #asp.net core mvc with jquery and ajax #asp.net core popup window #bootstrap modal popup in asp.net core mvc. bootstrap modal popup in asp.net core #delete and viewall in asp.net core #jquery ajax - insert #jquery ajax form post #modal popup dialog in asp.net core #no direct access action method #update #validation in modal popup

I am Developer

1611112146

Codeigniter 4 Autocomplete Textbox From Database using Typeahead JS - Tuts Make

Autocomplete textbox search from database in codeigniter 4 using jQuery Typeahead js. In this tutorial, you will learn how to implement an autocomplete search or textbox search with database using jquery typehead js example.

This tutorial will show you step by step how to implement autocomplete search from database in codeigniter 4 app using typeahead js.

Autocomplete Textbox Search using jQuery typeahead Js From Database in Codeigniter

Download Codeigniter Latest
Basic Configurations
Create Table in Database
Setup Database Credentials
Create Controller
Create View
Create Route
Start Development Server

https://www.tutsmake.com/codeigniter-4-autocomplete-textbox-from-database-using-typeahead-js/

#codeigniter 4 ajax autocomplete search #codeigniter 4 ajax autocomplete search from database #autocomplete textbox in jquery example using database in codeigniter #search data from database in codeigniter 4 using ajax #how to search and display data from database in codeigniter 4 using ajax #autocomplete in codeigniter 4 using typeahead js

I am Developer

1615040237

PHP jQuery Ajax Post Form Data Example

PHP jquery ajax POST request with MySQL. In this tutorial, you will learn how to create and submit a simple form in PHP using jQuery ajax post request. And how to submit a form data into MySQL database without the whole page refresh or reload. And also you will learn how to show an error message to the user if the user does not fill any form field.

And this tutorial also guide on how to send data to MySQL database using AJAX + jQuery + PHP without reloading the whole page and show a client-side validation error message if it has an error in the form.

PHP jQuery AJAX POST Form Data In Into MySQL DB Example

Just follow the few below steps and easily create and submit ajax form in PHP and MySQL with client-side validation.

Create Database And Table
Create a Database Connection File
Create An Ajax POST Form in PHP
Create An Ajax Data Store File

https://www.tutsmake.com/php-jquery-ajax-post-tutorial-example/

#jquery ajax serialize form data example #submit form using ajax in php example #save form data using ajax in php #how to insert form data using ajax in php #php jquery ajax form submit example #jquery ajax and jquery post form submit example with php

戈惠鈺

1679548860